The UI Animation Newsletter
vol 19.26 • July 12, 2019 • Twitter / Subscribe / Archives 

Happy Friday! This week’s issue has both motion graphics and interactive animation in the inspiration section, and a neat technique for flyout menus. Also, my Designing More Expressive Products talk from last year’s An Event Apart is now up on their YouTube channel.

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.



IBM's logo animated

IBM's Plex site #day

Not only is Plex a pretty darn neat open source variable font, it also has a site with some nice UI animations. The animations used to draw attention to the CTAs—like the type tester and sharing link—give the site a friendly feel, and the scroll-based logo animation in the intro is a nice touch. The page loading stripes are very on-brand, but I kind of wish they they weren’t on every page. (They’d be a great candidate for an animation that reduces when prefers-reduced-motion is selected too.)


A lovely elastic fluid particle system experiment that's super fun to play with.

Hard work text animation

Hard work, work hard
A fun text animation and word play from Chris Gannon. (Also some pretty good advice!)

A cute sushi tray

How to make sushi
An animated short that goes through the steps of making sushi with some very clever food animation along the way.


Menus with dynamic hit areas
Flyout menus can be tricky for interaction but Hakim El Hattab demonstrates an innovative way to handle them with dynamic hit areas and SVG. Chris summarizes the technique in this post, and you can get the full story in Hakim’s CSS Day talk video.


Designing more expressive products 
An Event Apart just released this video of my talk on designing more expressive products. It’s all about how UI animation, and even sound design, can enhance your product’s message.


Smooth scrolling with inner image animation
A tutorial on creating subtle inner mage animations on scroll from Codrops. The end effect has a subtle parallax look to it.


Shape outside is animatable
I didn’t know shape outside was animatable until I saw this Pen. It may not be the most practical thing to use in your day-job, but it definitely opens up some fun possibilities for experiments.



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

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.