useSpring

useSpring creates a motion value that will animate to its latest target with a spring animation. The target can either be set manually, via .set, or automatically, by passing in another motion value.

#Usage

Import from Framer Motion.

import { useSpring } from "framer-motion"

#Create

useSpring can be initialised with a number:

const spring = useSpring(0)

Or by passing a motion value:

const x = useMotionValue(0)
const spring = useSpring(x)

By passing a motion value, the returned spring will automatically animate to the latest value of that motion value.

By passing a number, the spring will animate to the latest value passed to set.

const x = useSpring(0)

useEffect(() => {
  x.set(target)
}, [target])

return <motion.div style={{ x }} />

Note: As a side effect, motion values should only ever be set asynchronously from the main render function, for instance within an effect or event handler.

#Config

useSpring can be configured with the normal spring transition options.

useSpring(x, { stiffness: 1000, damping: 10 })

#Examples

Drag any of these balls: