The UI Animation Newsletter
vol 19.21 • May 31, 2019 • Twitter / Subscribe / Archives 

Happy Friday! We’ve got an especially eclectic mix of links in this week’s issue. Everything from WebGL inspiration to animated Lottie icons and prefers-reduced-motion tricks. Check out some cool animation tips and have a great weekend 😀

Until next week,

- Val

p.s. Replies go straight to my email, and I read them all. Tell me about what you’re working on.



sliding scrolling cards

Small Victories

This product site has a unique layered take on scroll-triggered animation. The animation adds a bit of fun to peeling back each layer of content, and it has just a touch of a brutalist web design feel to bring it all together.

Gooey abstract shapes

Breath in CSS only
A mesmerizing and gooey animation by Sandrina Pereira with no JavaScript involved.

A cat in a box, but not pooping

Cat in a box
It’s a cat. In a box! A cute CSS animation by Tiffany Choong.

Wacky radio button active states

Bulgy radios
Probably not something you’d use on a real form, but still entertaining to play with in this demo by Liam.

3d browser- based fireworks

Fireworks three.js
Some very dramatic particle-based fireworks by takashi.


Reducing motion with the picture element
A handy trick from Dave Rupert to replace animated .gifs with static images using the picture element and the prefers-reduced-motion query. Very clever!


How to animate paper in After Effects
A neat little tutorial on one approach to animating paper. It could be a fun technique to use with other mediums too.


A library of ready-made animated icons in Lottie and After Effects file formats. You can use them as is, or modify the animations in the source files provided.


30 experimental WebGL web sites
A collection of WebGL sites from the folks at Awwwards. There are lots of fun examples in this list.



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

Layers Conf
San Jose, June 3-5

An Event Apart DC
July 29-31

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.