glide
can animate transforms using momentum physics. This is great for creating scroll momentum animations.
import { animate, glide } from "motion"
Note: glide
is a simulation, so provided target keyframes and duration
will be overridden.
Velocity
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 }) } } })
Boundaries
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.
Options
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 })
Limitations
There are currently a couple of limitations with the glide
easing.
Limited duration
Glide animations with higher timeConstant
s 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.
Timeline
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 theglide()
function. glide
animations in a timeline need to be defined with a start and end keyframe:{ x: [0, 100] }
.
No hardware acceleration
glide
only works with independent transforms, which are not yet hardware accelerated in browsers.
Have you seen Motion DevTools?
It's an incredible new developer tool for Chrome that let you inspect, edit and export Motion One and CSS animations. Animate like the good-ol' days of Flash!