Copy
The UI Animation Newsletter
vol 19.47 • Dec 20, 2019 • Twitter / Subscribe / Archives 

Happy Friday! As 2019 comes to an end, this feels like the perfect time for a couple of "best of" issues to look back on the year. We covered a lot of ground in tutorials across all the issues this year and I've rounded up the top 10 most popular tutorials for this week.

If you’re looking to learn something new over the holiday break, I bet this list will have something you may be interested in. The top 10 list (present in no particular order) includes tutorials on CSS animation, performance, React and more.

Next week will have the most popular inspiration links of the year, so stay tuned for that one too!

- Val
 

p.s. Replies go straight to my email, and I read them all. Reply and let me know what you want to learn in 2020.

 

LINKS

Animations with React Spring
A helpful read for anyone wanting to use more spring animation in their React projects. It also uses React Hooks with the springs.

CSS custom properties in @keyframe animations
Some handy tips on using CSS variables (aka custom properties) to customize CSS keyframe animations from Sandrina Pereira. I wrote about some other ways to combine CSS custom properties and keyframe animations a while back as well. It’s a very useful and powerful combination!


Motion Paths – Past, Present and Future
A very informative journey through the state of animating with motion paths on the web from Cassie Evans. It’s a little bit about CSS features in the works, and a little bit about the power of GSAP motion paths.

Designers guide to animating icons with CSS
Shannon Thomann walks you through how to animate SVG icons with CSS and provides lots of examples along the way.

 

SVG filters 101
A seriously great intro to SVG filters from the also seriously great Sara Soueidan.

 

Exaggerate animation with squash and stretch
A helpful After Effects tutorial on how to pull off a good squash and stretch with lots of examples of how it can be used.

 

Clipping, clipping and more clipping
You can make some really neat animated effects using clip-path. Mikael Ainalem breaks down a whole series of techniques you can use in this CSS Tricks article.

 

UI Animation in React
Donovan takes you through a demo React app to show how you can add reusable UI animations. And you can try the demo out for yourself too.

 

Different approaches to creating staggered animations
A rundown of various different ways to create staggered CSS animations and related browser support.

 

Web performance - animation
Paul Lewis talks web animation performance with his energetic style. Spoiler alert: transforms and opacity are most definitely mentioned in this video.

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

Copyright © 2019


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