HomeUtilsMotion Spring Visualizer

Motion Spring Visualizer

Published Nov 27, 2024
1 minutes read

I have been using Framer Motion (now Motion) for quite some time in projects and couldn't be happier with its declarative API. It makes writing feel quite natural. Despite, as a heavy GSAP user in the past which has an imperative style of writing, there was definitely some getting used to. I was sometimes missing features like the beloved timeline however, in most cases it will be more than you'll need.

Motion Spring Visualizer
Tweak the spring props!

Motion's spring animation api makes building those buttery animations easy. In some cases I needed to iterate over a few variations by tweaking the stiffness, damping and mass properties to get that perfect easing. Quite fiddly to do by hot-reloading and re-triggering the animation all the time. So, I built this visualizer with some basic components where you can tweak these properties on the go and trigger the animation. Pretty sure this will save both developers and designers some time.

Motion Spring Visualizer