Copy
The UI Animation Newsletter
vol 20.13 • Mar 27, 2020 • Twitter / Subscribe / Archives 

Happy Friday! I hope you’re holding up well this week 💜

This week’s issue has some neat tutorials on making scroll-based animations and indicators, plus a take on custom cursors with SVG distortion effects.

If you need something light and fun right now, I recommend starting with the 3D kinetic letters and E is for ET.

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

Rouser Lab

This brightly colored site features some wacky imagery and a giant bubble that follows you as you scroll. You can even toss the bubble around and pop it for dramatic effect.

LINKS

3D kinetic letters
Brightly colored and animated 3D letter sculptures to brighten your day from Anna the Scavenger.

CSS floppy loader
Just a few energetic cubes making a loading animation.

Full moon
A night sky illustration with shooting stars, drawn entirely in CSS.

E is for ET
A very cute animation by matvoyce. Check out the rest of his recent alphabet posts for more fun motion work.

Export variable font glyphs as SVG animation
Samsa has added a feature that makes it super easy to create SVG animations from any glyph in a variable font. It's pretty neat! Details explained in the Twitter thread.

Parallax scroll animations with intersection observer API and GSAP3
A step-by-step tutorial for implementing scroll-based animation and using intersection observer with lots of examples along the way.

 

10 women of title design
Art of the Title's annual review of women in title design and the titles they've created. You'll definitely recognize at least a few movies or shows in this list.

 

Indicating scroll position with CSS
This could be a handy addition to any scrolling animations. Preethi shows you how to add a scroll position indicator for some additional page feed back on CSS Tricks.

 

Animated custom cursor effects
A tutorial on making custom cursors with SVG filter distortion effects from Mary Lou at Codrops.

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.