Copy
The UI Animation Newsletter
vol 19.28 • July 26, 2019 • Twitter / Subscribe / Archives 

Happy Friday! This week’s issue has some fun variable font animation, a helpful way to use animation in forms, and a handy guide to pulling off squash and stretch with style.

I’m heading out to DC to speak at An Event Apart DC in a couple of days. If you’re going to be there too, come say hi!

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

This wavy scroll text

This wavy scroll text totally caught me by surprise and I love it. Definitely not something to used too often, but having it there just once really calls out that side note, and sets the tone for the whole article. If you’re wondering how it was done it uses SVG text on a path. 

INSPIRATION

Tab bar active animation
A lively animated tab bar that’s both a Dribbble shot and a CodePen pen for the full interactive experience.

animated letters

Variable fonts compressa animation
A little bit of fun animating different axes of a variable font.

animated selfie illustration

Interactive head
An SVG avatar brought to life with a little bit of direction-aware motion.

LEARNING

Exaggerate animation with squash and stretch
A helpful After Effects tutorial on how to pull off a good squash and stretch with lots of examples of how it can be used. Knowing how to pull off this classic animation principle will make you a more skilled animator, no matter what your tool of choice is. 


Smooth scrolling image effects #dzy
A light and floaty parallax image scrolling effect from Codrops.

 

Avoid placeholder text by animating form labels
A helpful read from the Knowability blog on how to avoid the potential problems of placeholder text by animating form labels out of the way on focus. 


Reduced motion autoplay video
Autoplaying videos can be problematic for a lot of different folks. This tutorial shows you how you can use the prefers-reduced-motion query to stop auto playing video for folks with motion sensitivities.

 

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.