recentpopularlog in

garrettc : animation   137

« earlier  
Fading out siblings on hover in CSS
This is a nifty technique using :hover and pointer-events to fade out sibling elements of a hovered element.
animation  css  userinterface  webdesign  webdevelopment 
18 hours ago by garrettc
Kitbull | Pixar SparkShorts - YouTube
Kitbull, directed by Rosana Sullivan and produced by Kathryn Hendrickson, reveals an unlikely connection that sparks between two creatures: a fiercely independent stray kitten and a pit bull. Together, they experience friendship for the first time.
IFTTT  YouTube  video  pixar  animation  kitten  dog  friends 
9 weeks ago by garrettc
Gradians and Turns: the quiet heroes of CSS angles
"Degrees and radians are the angle units we all know and hate, but two lesser-known units are often much easier: turns and gradians"
css  webdesign  webdevelopment  animation 
10 weeks ago by garrettc
The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
"SVG is a great format for icons. Vector formats look crisp and razor sharp, no matter the size or device — and we get tons of design control when using them inline.

SVG also gives us another powerful feature: the ability to manipulate their properties with CSS. As a result, we can make quick and simple interactions where it used to take crafty CSS tricks or swapping out entire image files.

Those interactions include changing color on hover states. It sounds like such a straightforward thing here in 2019, but there are actually a few totally valid ways to go about it — which only demonstrates the awesome powers of SVG more."
animation  css  svg  webdevelopment  webdesign 
11 weeks ago by garrettc
A Fistful of Woolongs - A Cowboy Bebop Retrospective - YouTube
20 years after its debut, Cowboy Bebop still stands as one of the greatest anime series of all time. In this video I take a look at its rocky road to release and the lasting impact it's had on the industry in the decades following.
IFTTT  YouTube  video  animation  anime  sciencefiction 
12 weeks ago by garrettc
CSS Animation 101
"Animation using CSS can be overwhelming to learn all at once.

This book gives you a solid introduction to the topic, combining theory with practical lessons. You’ll learn how, and why to use animation on your web pages and hopefully be inspired to try it on your own projects!"
animation  css  ebook  programming  webdesign  webdevelopment 
november 2018 by garrettc
Animated Grid Previews
A template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an "explore" link is clicked.
animation  art  webdesign  grid  userinterface 
november 2018 by garrettc
100 Days of Motion Design – UX Collective
It was a summer night in Seattle. I ate some ice-cream, watched a Youtube tutorial, and downloaded a free trial of Principle. Several months later, I completed my 5th 100-day-project — 100 Days of…
animation  programming  tutorial  learning 
august 2018 by garrettc
Little Big City
Miniature globes created from maps.
design  globe  animation  city  webgl  3D  visualisation  javascript 
august 2018 by garrettc
Pts.js
Pts is a javascript library for visualization and creative-coding.
javascript  animation  canvas  library  visualisation  data 
august 2018 by garrettc
Easing Functions Cheat Sheet
Make animations more realistic by picking the right easing function.
animation  reference  css  javascript  programming  userinterface 
june 2018 by garrettc
Page Transitions for Everyone
"If we take a look at how mobile apps are designed today, there is very often some sort of animated transition between states. Even ready-to-use native components have some kind of simple animation between states. Developers and designers realized that this little animation helps a user grasp what is happening in the app. It makes the navigation through the app easier and tells the user where they are going within the app."
javascript  css  webdesign  webdevelopment  animation  userexperience  userinterface 
may 2018 by garrettc
Native-Like Animations for Page Transitions on the Web
"Some of the most inspiring examples I’ve seen of front end development have involved some sort of page transitions that look slick, like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not.

[…]

We’ll build out the simplest possible distallation of these concepts so that you can apply them to any application, and then I’ll also provide the code for this more complex app if you’d like to dive in."
animation  css  vuejs  programming  webdevelopment  userinterface  userexperience  learning 
april 2018 by garrettc
Popmotion
A functional, flexible JavaScript motion library
javascript  animation  design  library  physics  webdesign 
april 2018 by garrettc
Direction Aware Hover Effects
"This is a particular design trick that never fails to catch people's eye! I don't know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I'd round a few of them up here."
animation  css  javascript  webdesign  webdevelopment  userinterface 
february 2018 by garrettc
Photosensitive Epilepsy Analysis Tool
A downloadable program to help Web developers identify potentially seizure-inducing material.
animation  epilepsy  tool  software 
february 2018 by garrettc
MainLoop.js
Provides a well-constructed main loop useful for JavaScript games and other animated or time-dependent applications.
loop  animation  javascript  games  timing  library 
february 2018 by garrettc
PhysicsJS
A modular, extendable, and easy-to-use physics engine for javascript
javascript  animation  engine  physics  science 
january 2018 by garrettc
Dark & Stormy Night with CSS Animations
This beginner-friendly tutorial will introduce you to HTML and CSS as you create a simple stormy night scene with CSS animations.
css  animation  learning  tutorial  webdesign  webdevelopment 
january 2018 by garrettc
GSAP, the standard for JavaScript HTML5 animation | GreenSock
GreenSock Animation Platform (GSAP) is a suite of tools for scripted, high-performance HTML5 animations in all major browsers. Popular, reliable, and fast.
javascript  animation  css  library  webdevelopment  interaction  userexperience 
january 2018 by garrettc
CSS element() function
"This function renders any part of a website as a live image. As you see a DOM element rendered in the browser, you’ll get an image of it. Every changes to that element will be immediately seen in real-time in the image, even text selection."
css  webdesign  animation  webdevelopment 
november 2017 by garrettc
Shadertoy - The Drive Home
Generated animation of driving a car at night. Tail lights, rain on the window.
art  browser  graphics  webgl  bokeh  glass  rain  window  animation  generator 
november 2017 by garrettc
Short Trip
An hand-drawn, interactive illustration about a tram driver, mountains, cloaked cats and everything in between.
illustration  animation  art  inspiration  design 
september 2017 by garrettc
Building Skeleton Screens with CSS Custom Properties
"Designing loading states on the web is often overlooked or dismissed as an afterthought. Performance is not only a developer's responsibility, building an experience that works with slow connections can be a design challenge as well.

While developers need to pay attention to things like minification and caching, designers have to think about how the UI will look and behave while it is in a "loading" or "offline" state."
loading  performance  webdesign  webdevelopment  css  animation 
september 2017 by garrettc
Gain Motion Superpowers with requestAnimationFrame – Benjamin De Cock – Medium
In my last blog post explaining some of the technical details behind Connect, I briefly touched on the different options we now have to animate things on the web. I prioritized these options by ease…
webdevelopment  webdesign  animation  javascript 
august 2017 by garrettc
Discover DesignBetter.Co
DesignBetter.Co is the essential guide to the best design practices from top design experts. Learn how to build a world-class design organization and more.
design  reference  animation  learning  bestpractice  resource 
august 2017 by garrettc
Master of all Science
The Rick and Morty Search Engine - Create Memes and GIFs
rickandmorty  funny  gif  animation  television 
july 2017 by garrettc
Up and Down the Ladder of Abstraction
"How can we design systems when we don't know what we're doing?

The most exciting engineering challenges lie on the boundary of theory and the unknown. Not so unknown that they're hopeless, but not enough theory to predict the results of our decisions. Systems at this boundary often rely on emergent behavior — high-level effects that arise indirectly from low-level interactions.

When designing at this boundary, the challenge lies not in constructing the system, but in understanding it. In the absence of theory, we must develop an intuition to guide our decisions. The design process is thus one of exploration and discovery."
animation  design  visualisation  education  learning  interactive 
july 2017 by garrettc
Creating usability with motion
'The following manifesto represents my answer to the question — “As a UX or UI, designer, how do I know when and where to implement motion to support usability?”'
animation  motion  webdesign  userexperience  interface 
july 2017 by garrettc
Principle - Animated Design
"Principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing."
animation  design  tool  prototyping  webdevelopment  appdevelopment 
july 2017 by garrettc
Connect: behind the front-end experience
We recently released a new and improved version of Connect, our suite of tools designed for platforms and marketplaces. Stripe’s design team works hard to create unique landing pages that tell a story for our major products. For this release, we designed Connect’s landing page to reflect its intricate, cutting-edge capabilities while keeping things light and simple on the surface. In this blog post, we’ll describe how we used several next-generation web technologies to bring Connect to life, and walk through some of the finer technical details (and excitement!) on our front-end journey.
animation  css  javascript  stripe  webdesign  webdevelopment  accessibility 
june 2017 by garrettc
When TV Logos Were Physical Objectsby Christopher Jobson on May 15, 2017
It goes without saying that nearly everything made with graphic design and video software was once produced using a physical process, from newspapers to TV Logos. But some TV stations and film studios took things even further and designed physical logos that were filmed to create dynamic special effects.
video  animation  design  history 
may 2017 by garrettc
A Spacial Model for Lossless Web Navigation – freeCodeCamp
"As a part of the Browser.html project, I’m working on a spatial model through various user interactions and animations. This should help users better understand what’s going on and how to navigate the web most effectively.

Users have developed certain behaviors and expectations we want to build upon. Instead of replacing existing workflows, we want to enhance them."
animation  navigation  userexperience  pamoja  timeline 
april 2017 by garrettc
Animista
is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.
animation  css  webdesign  tools 
march 2017 by garrettc
Pixar in a Box
"Pixar in a Box is a behind-the-scenes look at how Pixar artists do their jobs. You will be able to animate bouncing balls, build a swarm of robots, and make virtual fireworks explode. The subjects you learn in school — math, science, computer science, and humanities — are used every day to create amazing movies at Pixar."
animation  education  pixar  khanacademy  learning  writing  storytelling  simulation  modelling 
march 2017 by garrettc
Piskel - Free online sprite editor
Piskel, free online sprite editor. A simple web-based tool for Spriting and Pixel art. Create pixel art, game sprites and animated GIFs. Free and open-source.
animation  editor  pixel  sprite  tool 
february 2017 by garrettc
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
CreateJS is a JavaScript suite for developers looking to control the true power of HTML5's canvas element.
javascript  animation  audio  canvas  html5  webdevelopment  programming 
december 2016 by garrettc
Tilt Hover Effects
Some ideas for hover effects with a fancy tilt effect. They add a nice subtle depth to the UI.
animation  css  demo  webdesign  userinterface 
november 2016 by garrettc
Video to GIF
Easily create GIFs from Youtube, Vimeo and hundreds of other video sites.
video  gif  tools  animation 
september 2016 by garrettc
Low Poly Scenes
Album with topic of Creativity uploaded by That0neKidSam. Low Poly Scenes
movies  films  animation  design  inspiration 
july 2016 by garrettc
The 50 Best Animated Films of the 21st Century Thus Far
We count down our favorite feature-length animations from this millennium, including Pixar, Studio Ghibli, and everything in between.
animation  films  lists  cinema 
july 2016 by garrettc
The Iron Giant Mondo Art Print
"The poster features one of our favorite scenes in the movie when the giant first discovers that he can fly, taking Hogarth along for the ride as his mother looks on. The poster is an 18” x 24” three color screen print with metallic ink on Cougar White paper."
posters  tobuy  animation  art  irongiant 
september 2015 by garrettc
Glen Keane – Step into the Page on Vimeo
Over nearly four decades at Disney, Glen Keane animated some the most compelling characters of our time: Ariel from The Little Mermaid, the titular beast in Beauty and the Beast, and Disney’s Tarzan, to name just a few. The son of cartoonist Bil Keane (The Family Circus), Glen learned early on the importance of holding onto your childhood creativity—and how art can powerfully convey emotion. Keane has spent his career embracing new tools, from digital environments to 3D animation to today’s virtual reality, which finally enables him to step into his drawings and wander freely through his imagination.
ifttt  vimeo  video  art  animation  design  technology  3d  vr 
september 2015 by garrettc
PIXELS by Patrick JEAN
New York invasion by 8-bits creatures
IFTTT  YouTube  video  funny  games  gaming  animation 
august 2015 by garrettc
Chuck Jones - The Evolution of an Artist - YouTube
"If you grew up watching Looney Tunes, then you know Chuck Jones, one of all-time masters of visual comedy. Normally I would talk about his ingenious framing and timing, but not today. Instead, I’d like to explore the evolution of his sensibilities as an artist."
IFTTT  YouTube  video  cartoon  bugsbunny  daffyduck  chuckjones  animation 
july 2015 by garrettc
Form Follows Function
FFF is a collection of interactive experiences. Each experience has its own unique design and functionality.
animation  art  css  html5  inspiration  webdesign  webdevelopment 
april 2015 by garrettc
Animation
It’s about time. In this article we’ll take on the challenge of creating and animating a clock, using simple CSS animations as well as JavaScript...
javascript  animation  clock  css  css3  svg 
march 2015 by garrettc
How to Create (Animated) Text Fills
A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.
animation  css  svg  userinterface  webdevelopment  webdesign 
february 2015 by garrettc
Subtle Click Feedback Effects
A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases.
animation  css  webdesign  svg  userinterface  feedback 
february 2015 by garrettc
A brief history of web design for designers
"How the web design evolved from tables and flash into responsive web design. A glimpse into the history on why design and code live separate lives."
animation  article  css  web  colour  webdevelopment  webdesign 
december 2014 by garrettc
Artists & Algorists
A blog for showcasing digital interactive art and a new breed of artist.
animation  art  design  technology  web  electronics  inspiration 
october 2014 by garrettc
ProgressBar.js
Beautiful and responsive progress bars with animated SVG paths.
javascript  animation  library  svg  development  webdevelopment  userinterface 
october 2014 by garrettc
three.js - Javascript 3D library
A lightweight 3D library with a very low level of complexity. The library provides <canvas>, <svg>, CSS3D and WebGL renderers.
javascript  3d  html5  library  animation  webdevelopment  development 
october 2014 by garrettc
WOW.js
Reveal content through scrolling.
javascript  animation  userinterface 
october 2014 by garrettc
countUp.js
countUp.js is a dependency-free, lightweight JavaScript "class" that can be used to quickly create animations that display numerical data in a more interesting way.
javascript  numbers  animation  numeric  library 
october 2014 by garrettc
« earlier      
per page:    204080120160

Copy this bookmark:





to read