A Friendly Introduction to Spring Physics — animation
⚠️ Please no sharing — This is a newsletter-exclusive preview ⚠️
From
Josh Comeau
Date
September 20th, 2020
Subject
Springs and sparkles ✨
Sign up so you don't miss the next issue!
| Josh Comeau |  |
Hi there!
I have so much exciting stuff to share this issue. Let's get right to it!
Link to this headingBlog 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!
Link to this headingSparkles
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:
Link to this headingBlack 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:
Link to this headingHack 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:
Link to this headingRich 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:
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.
Link to this headingReact 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!
Download it here: [redacted]