UI Animation Newsletter 20.12 - Motion path tricks 🎢 film titles finalists 🎬 animated loaders ⭐️

vol 20.12 • Mar 20, 2020 • Twitter / Subscribe / Archives

Happy Friday! It’s been on heck of a last week or so for all of us. I hope you’re holding up well with all that’s going on right now!

This week’s issue has some fun loader animations, a unique slider, a collection of top movie titles, and a couple of neat tutorials.

If you need something light and fun right now, I highly suggest starting with the stretch typo demo and the collection of title sequence finalists.

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 live video tutorial.

UI ANIMATION OF THE WEEK

GT Alpina

A type specimen site with a lot of style. This site combines favs like animated variable fonts and custom cursors for a site that's both informative and bursting with personality!

LINKS

Droplet loader
A fun liquid-inspired loader by Chris Gannon.

Frontend community header
This header animation gets some big dramatic type in motion with a rolling effect.

Stretch typo
A really fun and sparkly effect by ilithya. You can even switch out the blend mode to customize your look. (The custom properties in the text-shadow are a pretty neat trick too!)

Unicycle range slider
This range slider by Jon Kanter is very fun even if it's not very practical.

CSS circle loader
A hypnotic loading animation inspired by a book cover from Lynn Fisher.

Position text along a path
CSS Motion Path can be used to make some neat non-motion effects too! Michelle Barker shows you how in this post. (Don’t miss her collection of Motion Path examples for more.)

Background scale hover effect
Codrops walks you through a recreation of a cool background scale hover effect using CSS clip-path.

UPCOMING EVENTS

New events coming up this Spring! If you’ll be there too, come say hi!

Pixel Pioneers
June 12

An Event Apart Boston
June 29 - July 1

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