Copy
The UI Animation Newsletter
vol 20.03 • Jan 17, 2020 • Twitter / Subscribe / Archives 

Happy Friday! We’re back to our regular format this week with a nicely varied collection of inspiration and learning links. We’ve got some impressive CSS animation and a little 3D scene for inspiration; plus a look at some GSAP and Houdini tricks for some fun learning.

I’m no Houdini expert myself, but the more I learn about it, the more impressed I am. The tutorial below shows how you can use it to transition custom properties which is definitely very powerful.

Until next week,

- Val
 

p.s. Replies go straight to my email, and I read them all. Reply and let me know if motion paths are something you’d like to use more in your work.

 

UI ANIMATION OF THE WEEK

Flat UI and a Half

A very fun exploration of what UI elements that we run into every day might be like if they were all slightly 3D. I don't think this is going to be a new trend or anything, but it's fun to see these familiar UI controls in a different way.

LINKS

Power switch animation - CSS
A glowing energetic animation made with just CSS by Milan Raring.

Snow globe with Zdog
A cute 3D wintery scene complete with falling snow by Gabriela Johnson.

CSS is awesome (motion path)
Ok, this one isn’t actually animated so it kind of doesn’t belong. But it’s also such a clever use of (non-moving) motion path I just had to share it!

Background-clip:text over animated SVG
A little proof of concept I put together last week. It was a fun effect to put together. (If this is something you’d like a tutorial on how to do, reply and let me know.)

Magical rainbow gradients with CSS Houdini and React hooks
That’s a mouthful of a title, but this tutorial includes some very neat techniques, including using Houdini to animate CSS custom properties. It really is like magic! Josh also includes a vanilla JS example too if React and Hooks aren’t your thing.

 

GSAP advanced staggers with ease-based distribution of start times
This video tutorial digs into some really neat techniques that are possible with the latest version of GSAP.

 

UI interactions and animations round up #1
The folks at Codrops have started a new roundup series that is very relevant to this newsletter’s interests. This first round up features a number of animated UI interactions that push the boundaries of what we might think is possible on the web.



 

Support the UI Animation Newsletter: 
Submit a link for a future issue  or  Share it with a friend

Copyright © 2020


You can update your preferences or unsubscribe from this list here.