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
- arc() | Animate along a curved pathmotion.dev
- Great Animationsemilkowal.ski
- Effortless UI Spring Animations: A Two-Parameter Approachkvin.me
- Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
- animations.devanimations.dev
- To Spring or Not To Springuserinterface.wiki
- Anime.js | JavaScript Animation Engineanimejs.com
- 15.1 Simple Harmonic Motion - University Physics Volume 1 | OpenStaxopenstax.org
- Not a Numbernan.fyi
- Fast Simulation of Mass-Spring Systemsusers.cs.utah.edu