Copy
The UI Animation Newsletter
vol 19.20 • May 24, 2019 • Twitter / Subscribe / Archives 

Happy Friday! I hope your Friday is as summery and sunny as the one we’re having here.

Ever wondered if your design system should include animation? I recently recorded my thoughts on the benefits of covering animation in your design system and the video just went live! (I also published some steps on how to get that done on Smashing Magazine a while back.)

I’d love to hear from you on this too: Does your design system cover animation? What’s worked well (or even not so well) for your team? Have questions about how to do it? Reply and let me know! 

This week’s issue has some colourful inspiration links, some neat animated image effects, and tips on how to create scroll-based animations. 

Until next week,

- Val
 

UI ANIMATION OF THE WEEK
Animated black and white icons

Another Lens

This one is an example of those little big details that we often don't take the time to really appreciate. These animated icons represent the guiding principles so effectively despite seeming so simple at first glance. They’re ”just” simple shapes in black and white, but the motion makes them wonderfully elegant.
 

INSPIRATION
A happy face button

Face button
This will put a smile on your face, and its face too! A personality packed hover interaction by Katherine Kato.

Colour arcs diving in

Colour diver
A fun and hypnotic looping SVG animation from Chris Gannon.

Blobby colourful faces

Colourful blob face animations
I totally made up that name, but these animation experiments from Giant Ant remind me a little of MRI imaging, except with a heck of a lot more style.

LEARNING

Scroll animations
A short guide to creating scroll-based animations using Intersection Observer from Donovan Hutchinson.

 

Animated image columns #dzy
An experimental demo from Mary Lou at Codrops where image columns are animated out when a menu item is clicked.



SVG properties and CSS
This one isn’t about animation exactly, but its very handy to know which SVG properties CSS can access when you want to do some SVG + CSS animation.


Image reveal hover effects
Codrops have added a few new affects to this big collection of image hover effects. Some of them get a bit wacky, but there’s lots of hover-ific ideas on this page.

UPCOMING EVENTS:

I’ll be at these events in the next few months. If you’re there too, come say hi!

Layers
San Jose, June 3-5

An Event Apart DC
July 29-31

Clarity
San Francisco, Aug 20-21

An Event Apart Chicago
Aug 26-28

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.