Copy
The UI Animation Newsletter
vol 19.36 • September 27, 2019 • Twitter / Subscribe / Archives 

Happy Friday! I spent most of this week at Finch Conf in Edinburgh. I got to be part of a very animation-filled morning with Hakim El Hattab and Cassie Evans, and I left feeling super inspired by all the neat web things shown at the event. It’s amazing what things like CSS and SVG can do!

Anyways, on to this week’s issue: We've got a very cool variable fonts demo and a deceptively simple looking background letter pattern for inspiration. On the tutorials side, there’s a detailed look at both web animation performance and the inner workings of intersection observer. Lots to dig into in this one!

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

Zhenya Rynzhuk portfolio site

There’s some lovely uses of stretching, blurring and depth going on in the animation on this site. Lots of layers and different directions of action too. The ”surprise” dots are my favorite touch on this portfolio site.

 

LINKS

Variable font resize on device orientation
Another very fun variable type experiment from Mandy Michael. (You’ll need to turn on motion and rotation info in iOS Safari’s preferences to try it out for yourself. See this tweet for details.)

Background pattern
This grid of playful letters is definitely more fun to play with that you’d expect. The letters animate in and out of place based on your mouse position.

Pure CSS book loader
A simple yet fun looping loader animation based on a Dribbble shot.

WebGL wavy image hover reveal
Fill the flower with waves of rainbow colours as you hover.

An explanation of how Intersection Observer works
A detailed look at how Intersection Observer works under the hood. Probably way more than you need to know to use it to trigger animation based on scroll position, but if you like to know all the details, this article has them.

 

Investigate animation performance with dev tools
A walkthrough of how to figure out if your animations are performing well using Chrome’s dev tools.

 

Crafting Stylized Mouse Trails With OGL
These mouse trailers might be a bit more involved than your average mouse trailer, but this tutorial covers some helpful background material on space and cameras in WebGL too.

UPCOMING EVENTS

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

Intersection Conf
Milan, Oct 1-3 

An Event Apart Denver
Oct 28-30

MAX
Los Angeles, Nov 3-6

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.