consolelog.tools logo

Spring Animation Calculator

Calculate spring physics for natural, realistic animations

Spring Visualization

Duration
0.67s
Overshoot
20.8%
Oscillations
1
Behavior
Underdamped (Bouncy)

Spring Configuration

Higher mass = heavier, slower movement

Higher stiffness = tighter spring, faster movement

Higher damping = more friction, less bounce

Spring Analysis

Underdamped (Bouncy)
The animation will overshoot and oscillate before settling
💡 Good for playful, energetic interfaces
⚠️ May be distracting if overused

Implementation Code

// Framer Motion
import { motion } from 'framer-motion';

<motion.div
  initial={{ scale: 0 }}
  animate={{ scale: 1 }}
  transition={{
    type: "spring",
    mass: 1,
    stiffness: 180,
    damping: 12,
    velocity: 0
  }}
>
  Content
</motion.div>

Spring Presets

Gentle
Soft, smooth animation with no bounce
M:1 S:100 D:26
Wobbly
Fun, bouncy animation with noticeable oscillation
M:1 S:180 D:12
Stiff
Quick, responsive with minimal overshoot
M:1 S:400 D:28
Slow
Leisurely, gradual animation
M:1 S:50 D:20
Molasses
Very slow, heavily damped
M:1 S:30 D:50
Bouncy
High energy with multiple bounces
M:1 S:300 D:10
Snappy
Fast and responsive, minimal bounce
M:0.5 S:500 D:30
Rubber Band
Elastic feel with pronounced stretching
M:2 S:200 D:8
Critical
Critically damped - no overshoot, fastest settling
M:1 S:100 D:20
iOS Default
Apple/iOS standard spring animation
M:1 S:300 D:30

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Frequently Asked Questions - Spring Animation Calculator