Motion
Back to framer.com
DocumentationMotion values
useSpring
Motion
Back to framer.com
Design and publish your first free site today.
Getting started
  • Introduction
  • Examples
Animation
  • Overview
  • Layout
  • Gestures
  • Scroll
  • Transition
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
Motion values
  • Overview
  • useMotionValueEvent
  • useMotionTemplate
  • useScroll
  • useSpring
  • useTime
  • useTransform
  • useVelocity
  • useWillChange
Hooks
  • useAnimate
  • useAnimationFrame
  • useDragControls
  • useInView
  • useReducedMotion
Universal
  • animate
  • transform
  • stagger
  • Easing functions
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

useSpring

A motion value that animates to its target with a spring.

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:

PrevioususeScrollNextuseTime
On this page
  • Usage
  • Create
  • Config
  • Examples

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement