The UI Animation Newsletter
vol 19.45 • Dec 6, 2019 • Twitter / Subscribe / Archives 

Happy Friday! This week’s issue has lots of fun tips for both current web animation techniques, and exciting up-and-coming features. 

There are tutorials on two of my favourite web animation things: SVG animation tricks and animating variable fonts. Plus we’ve also got a in-depth look at the state of motion paths on the web right now. (Yep, we can even use CSS for those.)

Basically that’s all a really long way of saying I’m especially excited about this issue and I hope you are too.

Until next week, 

- Val

p.s. Replies go straight to my email, and I read them all. Reply and let me know if motion paths are something you'd like to use more in your work.




A collection of interviews of designers from around the world. There’s a lot of scroll-based animation in this site and I especially enjoy how the various vehicles lead you from interview to interview as you go along.


AI eye training app concept
The animation in this demo really gives this little eyes character personality. 

Dual triangle loaders
How many ways can two triangles be made into a loading animation? They can be a butterfly, a bow, an hourglass, and so many other things. 

Interactive hippo button
A very cute hover state by Mariusz Dabrowski. There’s a write up about how it was made too.

Motion Paths – Past, Present and Future
A very informative journey through the current state of 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.


Interactivity and animation with variable fonts
I love variable fonts and I love all the super cool demos that Mandy makes with them! She tells you all about how she makes these demos in this 24 ways article.


Masked areas in SVG for cool effects
If you don’t already love SVGs here's one more reason why they are the coolest: you can use animated gifs as masks in SVG for some really cool effects. CSS-Tricks posted a summary of the technique too.


A handy tip for animating numbers
A small but powerful tip for animating numbers in a counting up or counting down sequence with examples from Jonathan Snook.


Bonus reading:
Lynn and tonic case study
Lynn's latest personal site design might not be animation in the traditional sense, but it’s a really neat site and I love that she also wrote all about how its was made.



Just one conference left for me to wrap up this year! If you’ll be there too, come say hi!

An Event Apart SF
Dec 9-11


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.