spring

The spring function animates transforms using real spring physics. This produces more natural-feeling animations.

import { animate, spring } from "motion"

animate(
  element,
  { x: 500 },
  { easing: spring() }
)

Note: Because spring is a simulation, any provided duration will be overridden.

spring will use real spring simulations to animate independent transforms like x, scale and rotate. All other values will use the defined spring to figure out how long it takes to reach its overshoot point (the bouncy bit) and will automatically create an animation to match.

This means that animating values like opacity with a bouncy spring won't create odd flashing effects.

Velocity

spring will automatically pass velocity from any running animations into the next one, so interrupting an animation will feel natural.

This can be overridden by manually passing velocity to spring. velocity is measured as units per second.

animate(
  "#ball",
  { x: 100 },
  { easing: spring({ velocity: 1000 }) }
)

If you want to pass a different velocity per value (for instance for animating at the end of a pointer gesture) you can create value-specific options:

animate(
  "#ball",
  { x: 0, y: 0 },
  {
    x: { easing: spring({ velocity: 200 }) },
    y: { easing: spring({ velocity: 500 }) }
  }
)

Options

stiffness

Default: 100

The attraction force of a spring. Higher values create faster, sharper movement.

spring({ stiffness: 500 })

damping

Default: 10

The opposing force of a spring. Higher values reduce the bounciness of the spring.

spring({ damping: 100 })

mass

Default: 1

mass affects the inertia of a value. Higher values will be slower to start moving and slower to stop.

spring({ mass: 2 })

restSpeed

Default: 2, or 0.05 for scale

A speed (in absolute units per second) below which the spring animation is considered finished.

spring({ restSpeed: 1 })

restDistance

Default: 0.5 or 0.01for scale

A distance from the animation target, below which the spring animation is considered finished.

spring({ restDistance: 0.1 })

velocity

Default: 0 or the value's current velocity

The velocity (in units per second) at which to start the spring animation.

spring({ velocity: 1000 })

Limitations

There are currently some limitations with the spring easing.

Duration

Springs with damping: 0 can last an infinite amount of time, but the Web Animations API needs a finite duration. So springs currently max out at 10 seconds (which is more than long enough for the vast majority of UI animations).
Increase damping relative to stiffness to decrease the duration of your animation.

Timeline keyframes

spring is supported in timeline but independent transforms must be defined with start and end keyframes: { x: [0, 100] }.

No hardware acceleration

spring only works with independent transforms, which are not yet hardware accelerated in browsers.