The UI Animation Newsletter
vol 20.02 • Jan 10, 2020 • Twitter / Subscribe / Archives 

Happy Friday! This first full week of 2020 brought us some interesting browser news. Firefox 72 is out with support for CSS Motion Path and individual transform properties. This makes it an especially interesting release for web animation. (You can read the full Firefox release notes for developers here.)

CSS Motion Path
Now that CSS Motion Path is in Firefox, it’s the perfect time learn more about it and try it out for yourself. (Blink browsers support it as well, and Edge is said to have support coming later this month.) Motion paths really open up the possibilities of what we can do with CSS!

Here are two helpful posts from Dan Wilson and Michelle Barker to get you started with CSS Motion Path:

Get Moving (or not) with CSS Motion Path

Fun with CSS motion paths

And for more details on all the various ways we have to create motion paths on the web, don't forget about the Motion Paths - Past, Present and Future article by Cassie Evans from a few issues back.

Individual Transform Properties
This one may not sound as fancy as motion paths, but it’s very useful for web animation. Enabling translate(), scale(), and rotate() as separate properties means you can also animate each of those properties separately instead of having them all wrapped up in the transform property together. (Chrome currently supports this as well.)

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.



Canals Amsterdam #dzy

I’m not usually a fan of horizontal scrolling, but the dramatic type and slick page transitions won me over on this one.


Furniture shopping
Just a little bit of 3D rotation really adds some dimension to this shopping exploration.

100 years animation
A clever number animation to get us from 1920 to 2020 by Ryan Mulligan.

Liquid loader
A colourful and gooey CSS animated loader animation by Michael Ainalem.

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.