Go BackFramer Motion

Animation Physics

Understanding Spring Motion Parameters in Framer Motion

Context

When I first started using Framer Motion, I was confused by spring animations. The default spring settings didn't feel right for my use cases, and I had no idea how to adjust them. After experimenting and learning about the physics behind springs, I realized that understanding just three parameters can transform your animations from robotic to natural and delightful.

Why Spring Over Default Ease

The default ease animation uses the same duration no matter how far the object needs to travel or how close it is. This creates an unnatural feel. Spring animations adapt to distance instead of same duration. If an object is close, it snaps quickly. If it's far, it takes more time to reach its destination. This gives you that natural, physics-based feel that makes animations feel alive.

Where to use what

So for mouse events like hover, click, drag, etc. I'd personally use spring as it gives more natural feel and more responsive. For dialogs I usually avoid spring and use the CSS EaseOut as duration is static for linear like point a to point b I use linear ease and for other animations I use spring.

Spring Parameters Overview

Spring animations in Framer Motion are based on real physics. They simulate how objects behave when connected to a spring, creating natural, organic motion. The three key parameters that control this behavior are:
  • Stiffness - how fast it snaps back (more stiffness more fast)
  • Damping - how much it bounces (more damping less bounce)
  • Mass - how much it takes to start moving (more mass more time)

Stiffness

How i remember it: think it like rubber band the more stiffness the tighter the rubber band and the faster it will snap back plus more bounce.

Damping

How i remember it: think it like a ball the heavier the ball the less the bounce lighter the ball more bounce

Mass

How i remember it: think it like a inertia the more inertia the more it will take to start moving the more it will resist the motion the more it will bounce the more it will resist the motion.

My go-to spring configuration

// My default - snappy and smooth
const defaultSpring = {
  type: "spring",
  stiffness: 300,
  damping: 30,
  mass: 0.2,
};

Practical Examples

I adjust these values according to what I need for each specific use case. Here are some common spring configurations I use in my projects:

SO At end Ask yourself

  • Want it snappy? Increase stiffness, decrease mass ( + - (10 - 50) and observe )
  • Want it bouncy? Decrease damping ( 5 - 10 )
  • Want it smooth? Increase damping ( 30 - 50 )
  • Want it slow start? Increase mass ( 0.2 - 0.5 )
  • Want it slow end? Increase damping ( 30 - 50 )
  • Want it fast start? Decrease mass ( 0.2 - 0.5 )
  • Want it fast end? Decrease damping or increase stiffness ( 10 - 50 )

Last Note

Spring animations are all about experimentation. Start with my default values (300 stiffness, 30 damping, 0.2 mass) and tweak one parameter at a time to see how it affects the motion. Once you understand how stiffness, damping, and mass work together, you'll be able to create animations that feel just right for your use case.

Good Reads

Go Back