inertia & keyframes

inertia and keyframes are the animation generators behind transition.type: 'inertia' and the default tween. They sit next to spring, re-exported unchanged from Motion.

mode · live running open

// type: inertia x 0px

fling

inertia

Inertia decelerates a value from its initial velocity. The value coasts toward origin + power × velocity. If min or max is set and the value would cross it, a spring brings it back to the boundary.

Use the string or the function as type. Both give the same result:

import { animate, inertia, motionValue } from '@humanspeak/svelte-motion'

const x = motionValue(0)

animate(x, [0], { type: 'inertia', velocity: 1000, power: 0.5 }) // settles at 500
animate(x, [0], { type: inertia, velocity: 1000, power: 0.5 }) // same

import { animate, inertia, motionValue } from '@humanspeak/svelte-motion'

const x = motionValue(0)

animate(x, [0], { type: 'inertia', velocity: 1000, power: 0.5 }) // settles at 500
animate(x, [0], { type: inertia, velocity: 1000, power: 0.5 }) // same

Options

Option	Default	Description
`velocity`	`0`	Initial velocity, in units per second.
`power`	`0.8`	How far the value travels: the target is `origin + power × velocity`.
`timeConstant`	`325`	Deceleration time constant, in ms. Higher values feel heavier.
`min`	none	Lower boundary. Crossing it hands off to the boundary spring.
`max`	none	Upper boundary. Crossing it hands off to the boundary spring.
`bounceStiffness`	`500`	Stiffness of the boundary spring.
`bounceDamping`	`10`	Damping of the boundary spring.
`modifyTarget`	none	Adjust the calculated target, e.g. to snap to a grid.
`restDelta`	`0.5`	Distance from the target under which the animation can finish.
`restSpeed`	spring default	Speed under which the boundary spring can finish. Passed through to it; unset, the spring uses `2`, or `0.01` when the remaining distance is under `5` (motion-dom `generators/inertia.ts`, `generators/spring.ts` @ v14.7.1).

Snap the resting position to a 50px grid:

animate(x, [0], {
  type: inertia,
  velocity: 800,
  modifyTarget: (target) => Math.round(target / 50) * 50
})

animate(x, [0], {
  type: inertia,
  velocity: 800,
  modifyTarget: (target) => Math.round(target / 50) * 50
})

Sampling a generator by hand

A generator is a function of options that returns { next(ms) }. Call next with the elapsed time in milliseconds to read the value without running an animation:

import { inertia } from '@humanspeak/svelte-motion'

const g = inertia({ keyframes: [0], velocity: 1000 })
g.next(16) // { value: …, done: false }
g.next(5000) // { value: 800, done: true }

import { inertia } from '@humanspeak/svelte-motion'

const g = inertia({ keyframes: [0], velocity: 1000 })
g.next(16) // { value: …, done: false }
g.next(5000) // { value: 800, done: true }

keyframes

keyframes is the tween generator behind type: 'keyframes' / 'tween', and the engine’s default. It interpolates through the keyframes over duration.

Option	Default	Description
`duration`	`300`	Length of the tween in milliseconds when sampled directly. (`transition.duration` stays in seconds.)
`ease`	`'easeInOut'`	An easing name, function, cubic-bezier array, or one easing per segment.
`times`	evenly spaced	Progress (`0`–`1`) of each keyframe.

import { keyframes } from '@humanspeak/svelte-motion'

const tween = keyframes({ keyframes: [0, 100], duration: 1000, ease: 'linear' })
tween.next(250).value // 25

import { keyframes } from '@humanspeak/svelte-motion'

const tween = keyframes({ keyframes: [0, 100], duration: 1000, ease: 'linear' })
tween.next(250).value // 25

spring works the same way: pass it as type, or call it with options and sample next(ms).