Copy
The UI Animation Newsletter
vol 19.29 • Aug 2, 2019 • Twitter / Subscribe / Archives 

Happy Friday! I just returned from speaking at An Event Apart DC which was a wonderful event. I had some interesting design chats with folks there, and some of them even shared their real-world implementations of prefers-reduced-motion which was great!

I came across a whole lot of CSS tutorials this week, so this issue’s learning section is entirely filled with CSS animation topics. A whole variety of tutorials, and even a collection of animation libraries too. 

If you’ve been wanting to learn more about CSS animation, this is the issue for you!

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 learn about UI animation.

 

 

UI ANIMATION OF THE WEEK

Firefox’s save to Pocket animation

Firefox’s add to Pocket animation makes me smile when I’m adding articles to my queue. It’s a lovely little design detail that packs a whole lot of style into a small space to confirm that your selected article has been saved. (Now if I could just get better at keeping up with reading everything in my queue...)

No link for this one, but if you can check it out for yourself in Firefox.

INSPIRATION
A liquid simulation that rseponds to window movement

Shake the window
An amazing (and very fun) liquid simulation demo by Lorenzo Cadamuro. More info on how it was built in this tweet too.

Planet
A lovely bit of 3D dataviz by Nadieh Bremer. More info in her tweet here. I’m such a big fan of her work! 

Cassie name animation
A personality-packed type animation by Cassie Evans.

LEARNING

Dynamic SVG animation with CSS variables
A tutorial on how to make an SVG animation that changes colour based on CSS variables and animates with GSAP.

 

Figuring out CSS animation properties with a magic kittencorn
A fun journey through the basics of CSS Animation with a super cute mascot.

 

How to make a CSS animated Sun illustration
An in-depth tutorial from Michelle Barker on creating an animated illustration with gradients, clip-path, and CSS animation.

 

CSS animation libraries
Looking for an animation library for a little help with your CSS animations? Chris Coyier has put together a whole collection of them for you.

UPCOMING EVENTS:

I’m super excited about these upcoming events. If you’ll be at one of these too, come say hi!

Clarity
San Francisco, Aug 20-21

An Event Apart Chicago
Aug 26-28

Smashing Conf
Freiburg, Sept 9-10

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.