The UI Animation Newsletter
vol 20.45 • Dec 12, 2020 • Twitter / Subscribe / Archives 

Happy weekend! As the year winds down it seems like a good time to look back on the most popular links from this year. This week is all about the tutorials! Here are the top 10 most popular tutorial links (in no particular order) from 2020’s issues.

Next week we’ll cover the top inspiration links to round out this little year in review.


Until then, 

- Val

p.s. Replies go straight to my inbox. Reply and let me know what you’re working on.



The physics behind spring animations
Maxime Heckel digs into the math and physics behind spring animations. If you’ve ever wondered what the various numbers in the spring equations did, this article has those answers.

Stagger reveal animations for text
A short tutorial on how to recreate a letter stagger animation with GSAP and Splitting.js from the folks at Codrops.

The surprising things that CSS can animate
An interesting list full of examples of some things you might not have known that CSS can animate. Some of these might not be the best choice when it comes to performance, but it's still neat to know.

GSAP ScrollTrigger
GSAP now has a way for you to animate anything on scroll with GSAP itself. That's pretty cool. Here’s a fun CodePen demo of it in action too.

Tips for writing animation code efficiently
A helpful read from Zach Saucier on best practices for writing efficient animation code. The tips cover everything from using staggers to using timelines, and everything in between.


How they fit together: transform, translate, rotate, scale, and offset
This title is a mouthful but the article is super interesting. Dan Wilson covers how having independent transform properties can change the way we transform objects and CSS, especially when working with motion paths.


Animating SVG text on a path
A demo from Codrops that shows how to animate SVG text on a path on scroll using the Intersection Observer API and SVG filters.


Accessible animation
Wondering if your animation is accessible? I wrote up this deeper look at the web content accessibility guidelines on animation to explain what all their advice on animation means.


Optimizing SVG
Having well optimized SVGs can save you a lot of headaches. Michelle has lots of great advice on how to best optimize your SVGs in this post. For even more on optimizing SVGs out of Illustrator, I made this video explaining all the Illustrator SVG export setting.


Transitioning hidden elements
If you’ve ever tried to use a CSS transition on an element with the hidden attribute or display: none;, you know this can be a challenge. This tutorial walks you through some techniques to make transitioning hidden elements easier.

Support the UI Animation Newsletter: 
Submit a link for a future issue  or  Share it with a friend

Copyright © 2020

You can update your preferences or unsubscribe from this list here.