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.