Josh Comeau
September 20, 2020
Springs and sparkles ✨
Not already subscribed?
Sign up so you don't miss the next issue!
Josh Comeau
Issue #005

Hi there!

I have so much exciting stuff to share this issue. Let's get right to it!

Blog post preview

One of the most common questions I get is "which framework do you use for the animations on your site?". The disappointing truth is that I don't really have one; most of my animations are built from scratch, using a variety of techniques.

They all do have something in common, though: spring physics. Unlike traditional CSS transitions, Spring physics are modelled after the behavior of real-world springs. The motion they produce is so fluid and organic. Learning how to use spring physics was a major boon to my animation game.

Unfortunately, spring physics are a little tricky to get used to. A lot of folks find them intimidating, since you don't control the duration of an animation.

My latest blog post has been a labour of love; it's taken me longer to write than any other post. I'm super happy with the result, though. If you've been meaning to learn spring physics, I hope you'll find it helpful!


A few months ago, I published Animated Sparkles in React, and was delighted to see that some folks have started adding similar effects to their websites! Here are a couple of my favourites:

Black Tech Pipeline

Black Tech Pipeline is an awesome organization built to bring exposure, resources, and opportunities to Black technologists and their allies. Their site features a job board, an event calendar, and so much more. Their home page has this nifty, sparkly illustration:

4 people stand below criss crossed colored lines, with sparkles

Hack Club

Hack Club is an amazing community for teenagers into technology. They host weekly AMAs with inspiring people like Simone Giertz and Guillermo Rauch. Elon Musk recently donated $500,000 to the group, and they celebrated the announcement with some sparkles:

Text announcing the donation, with aninated sparkles on the dollar amount.

Rich Haines

Rich Haines is a software developer with a delightful personal portfolio. One of the personal touches that makes this site so charming is the music notes that spawn from behind these headphones:

Headphones spawn small music notes that twinkle like sparkles.

Have you used this effect somewhere? Or are you thinking about it? Reply to this email and let me know, I'd love to see what you're doing with it.

React Spring Cheatsheet

The blog post linked above is all about the mechanics of spring physics. It doesn't focus on any particular tools or libraries.

In future posts, I plan to talk about React Spring, a spring physics library for animating in React. It's a fantastic tool, but I find I'm often hopping back to the documentation to remember how to do something.

I've created a cheatsheet, with all of the most common operations. It'll go hand in hand with some of my upcoming blog posts ;). It might not make a ton of sense on its own, but if you are looking to learn about React Spring, I hope it'll be useful!

A letter-sized sheet covered in code snippets about React Springclose-up shot of a printed pageclose-up shot of a printed page

Download it here: