This week we're creating neat-o sliding effects, playing with AE and Lottie, and even some Three.js learning. As well as the usual amazing pure CSS animated art.

♥️ Donovan at CSSAnimation.rocks

Articles

Recreating Netlify's Neat-o Sliding Button Effect — css-tricks.com

A nice exploration of how to create a neat little hover button reveal from CSS Tricks

After Effects & Lottie in Webflow — university.webflow.com

If you're a Webflow person you might find this helpful: How to create animations in After Effects, export them as Lottie JSON files with the bodymovin plugin, then animate them in your Webflow site.

How to Create a Webcam Audio Visualizer with Three.js — tympanus.net

A tutorial on how to create a Three.js powered audio visualizer that takes input from the user's webcam.

Featured

Support this newsletter — www.patreon.com

While I love creating this newsletter every week, it does have some costs such as the newsletter hosting service. If you'd like to contribute you'll be able to offset this cost and help keep the newsletter going!

Inspiration

Order confirmation

Click the button to see a (very much over-engineered) but totally awesome in-button animation!

Analogue Clock

Gradients, shadows and clocks combined with pure CSS make this one of my favourite examples this week!

CSS Spaceship

Hover this cute pure-CSS spaceship to greet it's even cuter pure-CSS occupant!

Scroll experiment #4

A cool experiment in scroll-based animation and a grid layout

Name Animation

A very cool retro name animation!

That's it for this week! Don't forget, if you'd like to help support this newsletter there are two things you can do. First one, share the sign up page with your friends! It would be great to spread the word.

Secondly, you can help pay the newsletter hosting bills through my patreon page! If you pledge more than $1 per month I'll even send you a high-quality CSS Animation sticker (or two) as thanks.

See you next week,

Donovan