Articles Tagged

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

Along with the version 3.13 release, GSAP, and all its awesome plugins, are now freely available to everyone.

The GSAP animation library and its plugins are now completely free for open use.…

The @keyframes at-rule sets the value of properties at different points during an animation, so instead of defining how each property should behave at each frame of an animation, we set its keyframes, and CSS will figure out (i.e., interpolate) the values between them.

Well, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously thought, and is actually well-supported.

The animation-timeline CSS property controls the progress of animations using timelines beyond the traditional document timeline. Typically, CSS animations progress based on the amount of time passed in the document’s default timeline, which begins when the page is loaded. With …

The @starting-style at-rule in CSS allows us to define styles for elements just as they are first rendered in the DOM. The classic situation this solves is trying to animate an element from display: none.

I like how I’m hearing animations distinguished as “time-based animations” (or TBA) and “scroll-driven animations” (or SDA). A third? Maybe “navigation-based animations” (or NBA, lol) for multi-page transitions?…

I’m utterly behind in learning about scroll-driven animations apart from the “reading progress bar” experiments all over CodePen. Well, I’m not exactly “green” on the topic; we’ve published a handful of articles on it including this neat-o one by Lee …