Pmndrs.docs

Configs

Spring are configurable and can be tuned. If you want to adjust these settings, you should provide a config property to useSpring:

useSpring({ config: { duration: 250 }, ... })

Since v9 the config prop can now be partially updated:

const { x } = useSpring({
  from: { x: 0 },
  config: { frequency: 1 },
})
useEffect(() => {
  x.start({ config: { velocity: 0 } })
  x.start({ config: { friction: 20 } })
}, [])

And we've added the following properties frequency, dampening, round, bounce, progress & restVelocity.

PropertyDefaultDescription
mass1spring mass
tension170spring energetic load
friction26spring resistance
clampfalsewhen true, stops the spring once it overshoots its boundaries
precision0.01precision
velocity0initial velocity
easingt => tlinear by default, you can use any easing you want, for instance d3-ease
damping1The damping ratio, which dictates how the spring slows down. Only works when frequency is defined. Defaults to 1.
progress0When used with duration, it decides how far into the easing function to start from. The duration itself is unaffected.
durationundefinedif > than 0 will switch to a duration-based animation instead of spring physics, value should be indicated in milliseconds (e.g. duration: 250 for a duration of 250ms)
decayundefinednumber of decay rate. If passed true defaults to 0.998
frequencyundefinedThe natural frequency (in seconds), which dictates the number of bounces per second when no damping exists. When defined, tension is derived from this, and friction is derived from tension and damping.
roundundefinedWhile animating, round to the nearest multiple of this number. The from and to values are never rounded, as well as any value passed to the set method of an animated value.
bounceundefinedWhen above zero, the spring will bounce instead of overshooting when exceeding its goal value.
restVelocityundefinedThe smallest velocity before the animation is considered to be "not moving". When undefined, precision is used instead.

Presets

There are also a couple of generic presets that will cover some common ground.

import { ..., config } from 'react-spring'

useSpring({ ..., config: config.default })
PropertyValue
config.default{ mass: 1, tension: 170, friction: 26 }
config.gentle{ mass: 1, tension: 120, friction: 14 }
config.wobbly{ mass: 1, tension: 180, friction: 12 }
config.stiff{ mass: 1, tension: 210, friction: 20 }
config.slow{ mass: 1, tension: 280, friction: 60 }
config.molasses{ mass: 1, tension: 280, friction: 120 }