The physics behind spring animations - The Blog of Maxime Heckel
blog.maximeheckel.com · 1,489 words · saved by 1 readers
A deep dive into the inner workings of spring animations in Framer Motion.
In the past few months, I've become a big fan of Framer Motion. After looking at how I could use it to animate my styled-components, I've been tinkering around spring animations and rebuilt almost all the transitions and animations of components in several UI projects. While showcasing the result to some fellow developers I got some questions around the meaning of some of the terms and options used to set up a spring animation like mass, stiffness, and damping. Most of them were setting them without really knowing how they were influencing the resulting animation. Lucky for them, I used to…
saved by
related reading
- Animate with springs - WWDC23 - Videos - Apple Developerdeveloper.apple.com
- 10 Principles for Fluid UIkarlkoch.me
- Great Animationsemilkowal.ski
- Shading Motion - The Blog of Maxime Heckelblog-git-motion-post-maxime-heckels-projects.vercel.app
- Effortless UI Spring Animations: A Two-Parameter Approachkvin.me
- Inside Framer's Magic Motionnan.fyi
- animations.devanimations.dev
- Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
- To Spring or Not To Springuserinterface.wiki
- Getting started | React Springreact-spring.dev
- Animated Elements | React Springreact-spring.dev
- Fast Simulation of Mass-Spring Systemsusers.cs.utah.edu