Copy
The UI Animation Newsletter
vol 19.24 • June 27, 2019 • Twitter / Subscribe / Archives 

Happy Friday! My latest UX animation video series was just released 🎉. In it, I cover six key principles for designing animation that supports your UX efforts. The first video is on directing attention with animation and it’s out for you to watch right now.

The principle of directing attention is all about using animation to draw the user’s eye to what is most important to them and help keep them in the flow. It’s a useful principle to keep in mind to avoid creating distraction with animation. Distracting people is usually the last thing you want to do! (You can check out the full series here.) 

On to this week’s issue: we’ve got three very different styles of code-generated animation, a deeper look at the reduced motion with picture element technique, and a tutorial on a unique animated drag effect.

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

Slides.com dark mode micro-animation

Back to a very nice micro-interaction that caught my attention for this week’s feature. This elegantly moving light/dark mode toggle appears in the speaker view of slides.com. Sometimes it’s the little things that really make a UI stand out. (The rest of the UI animation in Slides is great too.)

INSPIRATION
Fancy code-driven letter animations

36 days of type #dzy
A fun collection of single animated letters created with various code techniques like three.js, p5.js, and more.

Python based C4D animation

Scaler
This animation was also created with code, but in a slightly different way. It’s all made with Python and Cinema4D geometry.

Cute little rice balls in a bowl

Rice ball dessert
Yum, dessert! This one is animated and personified by Cassidy Williams.

C4D animation
So very 3D and so very lovely. I could watch this one for hours!

LEARNING

Reduced motion picture technique take 2
Chris Coyier digs a little deeper in to the reduced motion with picture technique from a few weeks back. In this article, he looks at how things might work with a video source instead of a .gif, and some ideas around using web components to create a custom reduced motion toggle.

 

Freezeframe.js
Sort of related to the article above, freezeframe.js is a library for pausing and playing animated .gifs on hover, click, or other interactions.

 

Draggable image strip #dzy
A neat draggable image effect from Codrops using TweenMax and Draggability.

 

 

UPCOMING EVENTS:

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

An Event Apart DC
July 29-31

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.