Step Motion
Basic animation function to animate any value or element with a step function. It uses requestAnimationFrame for the step function and the Bezier Easing package for easing functions. It is a simple, but very flexible and powerful package, because you can animate everything with it with no limits. It could also be used as a base for a more complex animation library.
Installation
npm i step-motionor
yarn add step-motionUsage
Import the animate() function from step-motion and apply a step function.
import animate from 'step-motion'
animate({
step: (progress) => console.log(progress)
})API
Parameters:
-
step… step function that is called on every frame of the animation, with a parameterprogress… the eased progress (value between0and1) of the animation (required) -
duration… the duration of the animation inms(default:1000) -
delay… the delay before the animation starts inms(default:0) -
easing… the bezier easing array of the animation that describes the easing curve (default:[0, 0, 1, 1]which islinear) – more information here -
start… callback function that is called as soon as the animation starts (optional) -
stop… callback function that is called as soon as the animation stops (optional) -
cancel… callback function that is called as soon as the animation is cancelled (optional) -
enableReducedMotion… accessibility feature that prevents animations for users who prefer reduced motion on their OS (default:true)
Methods:
-
cancel… cancels the running animation -
running… returns a boolean that indicates if the animation is running or not
Examples
Example 1 — Animate a value of an element with easing:
const element = document.querySelector('div');
animate({
step: (progress) => {
element.style.opacity = progress;
},
easing: [0.25, 0, 0.75, 1],
});Example 2 — Same as above but a bit more complex step function:
const element = document.querySelector('div');
const startValue = 20;
const endValue = 80;
const diffValue = endValue - startValue;
animate({
step: (progress) => {
element.style.left = startValue + diffValue * progress;
},
easing: [0.25, 0, 0.75, 1],
});Example 3 — Animate two values of an element and set a custom duration:
const element = document.querySelector('div');
const startValue = 20;
const endValue = 80;
const diffValue = endValue - startValue;
animate({
step: (progress) => {
element.style.opacity = 1 - progress;
element.style.left = startValue + diffValue * progress;
},
duration: 500,
easing: [0.75, 0, 0.25, 1],
});Example 4 — Add a delay before the animation starts:
const element = document.querySelector('div');
animate({
step: (progress) => element.style.opacity = progress,
duration: 750,
delay: 500,
easing: [0.25, 0, 0.75, 1],
});Example 5 — Add callbacks for starting, stopping or cancelling the animation:
const element = document.querySelector('div');
animate({
step: (progress) => element.style.opacity = progress,
duration: 750,
delay: 500,
easing: [0.25, 0, 0.75, 1],
start: () => console.log('animation has started'),
cancel: () => console.log('animation was cancelled'),
stop: () => console.log('animation has stopped'),
});Example 6 — Animate a value without changing DOM elements directly – interesting for manipulating reactive variables (vue, react, svelte, …):
let counter = 0;
const counterMax = 100;
animate({
step: (progress) => {
counter = counterMax * progress;
},
easing: [0.25, 0, 0.75, 1],
});Example 7 — Cancelling an animation that is running with methods:
const element = document.querySelector('div');
const myAnimation = animate({
step: (progress) => element.style.opacity = progress,
cancel: () => console.log('animation was cancelled by a click of a button'),
});
const myButton = document.querySelector('button');
myButton.addEventListener('click', () => {
if (myAnimation.running()){
myAnimation.cancel();
return;
}
console.log('animation is not running');
});Example 8 — Disable prefers-reduced-motion accessibility feature:
let counter = 0;
const counterMax = 100;
animate({
step: (progress) => counter = counterMax * progress,
enableReducedMotion: false,
});
