Copy
The UI Animation Newsletter
vol 20.17 • April 24, 2020 • Twitter / Subscribe / Archives 

Happy Friday! It’s hard to believe that it’s Friday already. Time is going by at such a strange pace right now, that’s for sure.

Today’s issue has an animated microinteraction that totally made my week, a neat clip-path effect, details on the WAAPI and even another Animal Crossing reference for good measure.

If you just need something fun and light right now, I recommend starting with the Isabelle's day off and hi links below.

Stay safe, 

- Val
 

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

 

UI ANIMATION OF THE WEEK


Libby app playback speed

I haven’t featured a microinteraction in this space in a few issues, so when I came across this lovely little audio speed change interaction this week, I had to share it. This is from the Libby audio book/library app. It’s both a nice design detail and nicely timed as you interact with it to change your playback speed.

On one hand this is a small detail, but it’s also a very important one. Changing the playback speed is a common task when using an audio book player which makes it the perfect place for a more detailed interaction.

LINKS

Hi
Another high-energy type animation from Mat Voice. He’s been posting a bunch of great ones on Instagram again the past few days too.

Isabelle's Day off (pure CSS)
A cute character animation and an excuse to mention Animal Crossing again all done in CSS by Tee Diang.

In too deep
A dramatic isometric neon text effect by Alex Trost.

Make a skull
A fun little step by step sneak peek at the motion design process behind animating a flaming cartoon skull from Alesis Heaps.

Pseudo elements and the web animation API
A very interesting exploration into the growing support for animating pseudo-elements with the WAAPI by Dan Wilson.

 

Creating playful effects with CSS text shadows
Text shadows can do some amazing things. From basic effects to fancy outlines and things like Sarah Fossheim shows you how to do in this CSS Tricks tutorial.

 

CSS clip-path hover effect
A funky hover effect made with clip-path and blend modes by Ryan Mulligan. It’s amazing what CSS can do these days, isn’t it?

 

How we built a playful webGL experience
A behind the scenes story of a webGL experience from Jam3.

 

Awesome demos roundup #15
Another collection of cutting-edge demos to be awed by from the folks at Codrops.

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

Copyright © 2020


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