Copy
The UI Animation Newsletter
vol 20.20 • May 15, 2020 • Twitter / Subscribe / Archives 

Happy Friday! It’s a much-needed warm and sunny Friday around here. Hopefully you’re seeing a similarly mood-boosting Friday where you are too. We all definitely need it right now!

This week’s issue has two very helpful visualizers, a magical single div cube, fancy link underlines, and a fun day to night toggle. Today’s links cover lot of ground.

If you just need something light and fun right now, I recommend starting with the sinking cube and 2000 thank you links below.

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 have covered in a video tutorial.

 

UI ANIMATION OF THE WEEK

Eva Cremers site #dzy

Eva’s site is full of cute and whimsical 3D characters to brighten your day. It’s the perfect place for wavy links and spinning circle buttons too. Those aren’t things you can get away with everywhere, but they work well here.

LINKS

Day night toggle with curtain
A bit of a real world twist on this day to night toggle gives it a little extra punch.

Underline animation
Sure you’ve seen a lot of links with underlines, but these animated underlines from Aaron Iker bring a new twist to this pattern.

2000 thank you
A 3D-ish type animation by Adam Kuhn to celebrate 2000 followers.

Sinking cube
A mind-bending single div animation by Lynn Fisher. Check out the source code on CodePen to be extra amazed at this one!

Minigames and playful interactions
A collection of notable fun site from around the web, curated by the folks at Awwwards.

 

Intersection observer visualizer
A very handy demo from Michele Barker to help you visualize the results of your settings for intersection observer. If you’ve ever wondered how the rootMargin and threshold properties affect things, this demo will help!

 

SVG path visualizer
Another helpful visualizer to share! This one explains the various values of SVG paths for any shape you give it (plus some preloaded shapes as well). Path data can be really confusing to look at, but this visualizer will help you better understand what all the letters and numbers mean. Definitely a big help if you're doing any SVG animation.

 

Runcat
A keyframe animation in your menu bar that changes speed based on CPU consumption. Definitely cuter than just listening to your laptop’s fan getting louder and louder.

 

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.