Interface Spring

An animation that simulates spring physics for realistic motion. This is the default animation for physical values like x, y, scale and rotate.

interface Spring {
    bounce?: number;
    damping?: number;
    duration?: number;
    from?: string | number;
    mass?: number;
    repeat?: number;
    repeatDelay?: number;
    repeatType?: "reverse" | "loop" | "mirror";
    restDelta?: number;
    restSpeed?: number;
    stiffness?: number;
    type: "spring";
    velocity?: number;
}

Hierarchy (view full)

Properties

bounce? damping? duration? from? mass? repeat? repeatDelay? repeatType? restDelta? restSpeed? stiffness? type velocity?

Properties

Optional bounce

bounce?: number

bounce determines the "bounciness" of a spring animation.

0 is no bounce, and 1 is extremely bouncy.

If duration is set, this defaults to 0.25.

Note: bounce and duration will be overridden if stiffness, damping or mass are set.

<motion.div
  animate={{ x: 100 }}
  transition={{ type: "spring", bounce: 0.25 }}
/>

Optional damping

damping?: number

Strength of opposing force. If set to 0, spring will oscillate indefinitely. Set to 10 by default.

<motion.a
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', damping: 300 }}
/>

Optional duration

duration?: number

The duration of the animation, defined in seconds. Spring animations can be a maximum of 10 seconds.

If bounce is set, this defaults to 0.8.

Note: duration and bounce will be overridden if stiffness, damping or mass are set.

<motion.div
  animate={{ x: 100 }}
  transition={{ type: "spring", duration: 0.8 }}
/>

Optional from

from?: string | number

The value to animate from. By default, this is the initial state of the animating value.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', from: 90 }}
/>

Optional mass

mass?: number

Mass of the moving object. Higher values will result in more lethargic movement. Set to 1 by default.

<motion.feTurbulence
  animate={{ baseFrequency: 0.5 } as any}
  transition={{ type: "spring", mass: 0.5 }}
/>

Optional repeat

repeat?: number

The number of times to repeat the transition. Set to Infinity for perpetual repeating.

Without setting repeatType, this will loop the animation.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ repeat: Infinity, duration: 2 }}
/>

Optional repeatDelay

repeatDelay?: number

When repeating an animation, repeatDelay will set the duration of the time to wait, in seconds, between each repetition.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ repeat: Infinity, repeatDelay: 1 }}
/>

Optional repeatType

repeatType?: "reverse" | "loop" | "mirror"

How to repeat the animation. This can be either:

"loop": Repeats the animation from the start

"reverse": Alternates between forward and backwards playback

"mirror": Switches from and to alternately

<motion.div
  animate={{ rotate: 180 }}
  transition={{
    repeat: 1,
    repeatType: "reverse",
    duration: 2
  }}
/>

Optional restDelta

restDelta?: number

End animation if distance is below this value and speed is below restSpeed. When animation ends, spring gets “snapped” to. Set to 0.01 by default.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', restDelta: 0.5 }}
/>

Optional restSpeed

restSpeed?: number

End animation if absolute speed (in units per second) drops below this value and delta is smaller than restDelta. Set to 0.01 by default.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', restSpeed: 0.5 }}
/>

Optional stiffness

stiffness?: number

Stiffness of the spring. Higher values will create more sudden movement. Set to 100 by default.

<motion.section
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', stiffness: 50 }}
/>

type

type: "spring"

Set type to "spring" to animate using spring physics for natural movement. Type is set to "spring" by default.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ type: 'spring' }}
/>

Optional velocity

velocity?: number

The initial velocity of the spring. By default this is the current velocity of the component.

<motion.div
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', velocity: 2 }}
/>

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc