A CSS Slinky in 3D? Challenge Accepted!
Braydon Coyer recently launched a monthly CSS art challenge. He actually had reached out to me about donating a copy of my book Move Things with CSS to use as a prize for the winner of the challenge — …
Articles Tagged
animation
121 Articles
GSAP Flip Plugin for Animation
Greensock made the GSAP Flip plugin free in the 3.9 release. FLIP is an animation concept that helps make super performance state-change animations. Ryan Mulligan has a good blog post:
…FLIP, coined by Paul Lewis, is an
Chris Coyier
on
Building a Scrollable and Draggable Timeline with GSAP
Here’s a super classy demo from Michelle Barker over on Codrops that shows how to build a scrollable and draggable timeline with GSAP. It’s an interesting challenge to have two different interactions (vertical scrolling and horizontal dragging) be tied together …
Shared by
Chris Coyier
on
Empathetic Animation
Animation on the web is often a contentious topic. I think, in part, it’s because bad animation is blindingly obvious, whereas well-executed animation fades seamlessly into the background. When handled well, animation can really elevate a website, whether it’s just …
Cassie Evans
on
(Updated on )
Low framerate in Safari on M1 Mac
I recently noticed that animations in Safari were stuttering pretty badly on my M1 powered 2020 MacBook Air, and dove in to figure out why.
The why:
…This wasn’t a bug. This was a feature.
Shared by
Chris Coyier
on
Recreating the Apple Music Hits Playlist Animation in CSS
Apple Music has this “Spatial Audio” feature where the direction of the music in your headphones is based on the location of the device. It’s tough to explain just how neat it is. But that’s not what I’m here to …
Geoff Graham
on
A Handy Little System for Animated Entrances in CSS
I love little touches that make a website feel like more than just a static document. What if web content wouldn’t just “appear” when a page loaded, but instead popped, slid, faded, or spun into place? It might be a …
Neale Van Fleet
on
(Updated on )
Parallax Powered by CSS Custom Properties
Good friend Kent C. Dodds has recently dropped his new website which had a lot of work go into it. I was fortunate enough that Kent reached out a while back and asked if I could come up with some …
Animation Techniques for Adding and Removing Items From a Stack
Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do. Changing the background color of a button when you hover over it? Easy. Animating the position and size of an …
Exploring the CSS Paint API: Blob Animation
After the fragmentation effect, I am going to tackle another interesting animation: the blob! We all agree that such effect is hard to achieve with CSS, so we generally reach for SVG to make those gooey shapes. But …
Temani Afif
on
(Updated on )
Stealing Game Animation Techniques to Engage Users
Today’s websites are overflowing with animations—often too many. They get in the way of the content and slow down our busy users. But at the same time: they’re wonderful. They bring websites to life, are fun to implement and …
Eli Penner
on
