spring

Motion's hybrid animate() function and motion component provide spring animations out of the box.

However, to reduce filesize and ensure you only import what you need, its mini animate() function must be provided the spring generator directly.

import { animate } from "motion/mini"
import { spring } from "motion"

animate(
  element,
  { transform: "translateX(100px)" },
  { type: spring, bounce: 0.3, duration: 0.8 }
)

However, spring can be used directly for low-level use for advanced use-cases, for instance a spring visualiser or to pre-generate linear() easing functions for use with CSS.

Usage

Import spring from Motion.

import { spring } from "motion"

spring is a function that returns a generator.

const generator = spring({ keyframes: [0, 100] })

This generator can be used to sample to spring at specific times (defined in milliseconds).

As a generator, next() returns two values, value and done.

const { value, done } = generator.next(10) // Spring state at 10 milliseconds

The spring can be sampled in a non-linear fashion, meaning you can sample the spring at any time.

generator.next(100)
generator.next(10)

Generating a spring

For most use-cases, like linear() easing generation or visualisation, you will probably want to run the generator in time order. You can do this with a normal loop that continues until the spring is done.

const generator = spring({ keyframes: [25, 75], stiffness: 400 })
const output = []

let isDone = false
let time = 0
const sampleDuration = 20 // ms

while (!isDone) {
  const { value, done } = generator.next(time)

  output.push(value)

  time += sampleDuration

  if (done) isDone = true
}

Warning: Springs with damping: 0 will run forever, so you'll need to put some kind of constraint on how many times the spring will be sampled, or what the minimum damping can be, etc.

Options

The spring can be configured with a number of options.

keyframes

spring must be provided with two keyframes to animate between. These can be any two numerical values.

spring({ keyframes: [0, 100] })

bounce

Default: 0.25

bounce determines the "bounciness" of a spring animation.

0 is no bounce, and 1 is extremely bouncy.

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

damping

Default: 10

Strength of opposing force. If set to 0, spring will oscillate indefinitely.

mass

Default: 1

Mass of the moving object. Higher values will result in more lethargic movement.

stiffness

Default: 1

Stiffness of the spring. Higher values will create more sudden movement.

velocity

Default: Current value velocity

The initial velocity of the spring.

restSpeed

Default: 0.1

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

restDelta

Default: 0.01

End animation if distance is below this value and speed is below restSpeed. When animation ends, the spring will end.