Copy
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.

 

 

UI ANIMATION OF THE WEEK
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.

INSPIRATION
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.

LEARNING

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.

 

useAnimations
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.

 

UPCOMING EVENTS:

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

Clarity
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.