glide

glide can animate transforms using momentum physics. This is great for creating scroll momentum animations.

import { animate, glide } from "motion"

import { animate, glide } from "motion"

animate(
  "#carousel",
  { x: 0 },
  { easing: glide({ velocity: -500 }) }
)

Note: glide is a simulation, so provided target keyframes and duration will be overridden.

glide will automatically pass velocity from any running animations into the next one, so interrupting an animation will feel natural.

This can be overridden by manually passing velocity to glide. velocity is measured as units per second.

animate(
  "#carousel",
  { x: 100 },
  { easing: glide({ velocity: 1000 }) }
})

If you want to pass a different velocity per value (for instance for animating at the end of a pointer gesture) you can create value-specific options:

animate(
  "#carousel",
  { x: 0, y: 0 },
  {
    x: { easing: glide({ velocity: 200 }) },
    y: { easing: glide({ velocity: 500 }) }
  }
})

By setting min and/or max you can set boundaries to the glide animation. If the animated value exceeds these boundaries, a spring animation will start to catch the value and animate it to the exceeded boundary.

import { animate, glide } from "motion"
  
animate(
  "#carousel",
  { x: 0 },
  {
    easing: glide({
      velocity: -1200,
      min: -800,
      bounceStiffness: 500,
      bounceDamping: 20
    })
  }
)

`velocity`

Default: 0, or the value's current velocity

The velocity (in units per second) at which to start the glide animation.

glide({ velocity: 1000 })

`power`

Default: 0.8

power influences how much of the initial velocity is factored into the animation, and thus how far the animation will glide.

Higher values will throw the animation further and feel lighter, whereas lower values will feel heavier.

glide({ power: 2 })

`decay`

Default: 0.325

A time constant (in seconds) used to calculate velocity decay.

Higher values lead to longer animations with more gradual deceleration and a lighter feel.

glide({ decay: 0.5 })

`changeTarget`

The glide animation automatically calculates a target to animate to. By setting changeTarget, you can take this calculated target and return a new one.

For instance, the function in the following example will snap the target to the next 100:

const roundTo = 100
glide({
  changeTarget: (target) => Math.ceil(target / roundTo) * roundTo,
})

`min`

A minimum boundary for the glide animation. If the animated value exceeds this boundary, a spring animation will take over to snap the value to min.

glide({ min: -100 })

`max`

A maximum boundary for the glide animation. If the animated value exceeds this boundary, a spring animation will take over to snap the value to max.

glide({ max: -100 })

`restDistance`

Default: 0.5, or 0.01 for scale

A distance from the animation target, below which the glide animation is considered finished.

glide({ restDistance: 0.1 })

`bounceStiffness`

Default: 100

The attraction force of the spring used if the animation exceeds the boundaries defined by min or max. Higher values create faster, sharper movement.

glide({ max: 100, bounceStiffness: 500 })

`bounceDamping`

Default: 10

The opposing force of the spring used if the animation exceeds the boundaries defined by min or max. Higher values reduce the bounciness of the spring.

glide({ max: 100, bounceDamping: 500 })

`restSpeed`

Default: 2, or 0.05 for scale

A speed (in absolute units per second) below which the bounce spring animation is considered finished.

glide({ restSpeed: 1 })

There are currently a couple of limitations with the glide easing.

Glide animations with higher timeConstants will take longer to finish, but the Web Animations API needs a finite duration. So they currently max out at 10 seconds.

Lower the timeConstant to shorten the duration of the animation.

glide is supported in timeline but there are two requirements:

Animations on a timeline don't currently pass velocity throughout the animation sequence, so this needs to be provided manually through the glide() function.
glide animations in a timeline need to be defined with a start and end keyframe: { x: [0, 100] }.

glide only works with independent transforms, which are not yet hardware accelerated in browsers.

Contents

Velocity

Boundaries

Options