Copy
The UI Animation Newsletter
vol 20.15 • April 10, 2020 • Twitter / Subscribe / Archives 

Happy Friday! We’ve made it to the end of another week of this strange new normal of lockdowns and staying at home. I hope you’re still holding up well and staying safe and healthy. 💜

This week’s issue has some notable browser news, two cute animated animals, plus some helpful tips on animating SVG and working with CSS motion paths.

If you just need something fun and light right now (that is definitely my current mood), start with the WFH cat and the cute dino loader.

It’s been great to see more virtual events happening right now since so many live events have been postponed or canceled. I’ve got an AMA coming up with Jina Anne on April 17th. Come ask us anything about design systems or animation! I'll have more virtual events to come in the next few weeks too.

Until next week, 

- Val
 

p.s. Replies go straight to my email, and I read them all. Reply and let me know what you’d most like to have covered in a video tutorial.

 

UI ANIMATION OF THE WEEK

Stone and Style #dzy

This site pairs high contrast black and white design with dramatic depth and motion. The giant persistent stone that breaks apart as you scroll is pretty darn dramatic too, and there's just a touch of stone-shattering glitch effect in the page transitions too. (There's some Three.js and GSAP going on under the hood, if you were wondering.)

LINKS

Super cute dino loader
A very cute pair of dinosaurs strolling into the loading unknown.

CSS cat working remotely
Love this cute animated CS illustration by Deren. If only our cats actually would help out a little more while we’re working from home!

Button bending hover
Oh no, you broke the button! Just kidding, it’s supposed to be that was in this demo from Aaron Iker.

13 minutes to the moon
This one goes out to the cats trying to command spacecraft. It's an animated version of one of the graphics from the BBC series from Pete Barr.

Web animation api in safari 13.1
The Web Animations API comes to Safari! And animations are now in the Safari web inspector too. This article is a good read on the history of CSS animation from the WebKit team and a quick into on how to use the WAAPI.

 

Animating complex SVGs
Did you know you can animate even complex SVG illustrations with CSS if you want to? This tutorial digs into the details of how and even covers a bit on using intersection observer to make sure your illustrations only animate when in view.

 

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.

 

Rapid layer image animations
A fun demo from Mary Lou at Codrops recreating a video effect on the web. She links to a couple of tutorials to give you more insight into how it was all done too.

 

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.