The JSAnimation class (exported as part of Anime.js) represents an animation instance. It extends the Timer class and provides methods for controlling animation playback, modifying properties, and responding to animation events.
Constructor
class JSAnimation extends Timer {
constructor(
targets: TargetsParam,
parameters: AnimationParams,
parent?: Timeline,
parentPosition?: number,
fastSet?: boolean,
index?: number,
length?: number
)
}
In most cases, you should use the animate() function instead of instantiating JSAnimation directly. Properties
targets
Array of all targets being animated by this animation instance.
Unique identifier for the animation. Can be set via parameters or auto-generated.
duration
Total duration of the animation in milliseconds, including all loops.
iterationDuration
iterationDuration: number
iterationCount
Number of times the animation will loop. Infinity for infinite loops.
paused
Whether the animation is currently paused.
completed
Whether the animation has completed.
began
Whether the animation has begun playing.
reversed
Whether the animation is playing in reverse.
currentTime
Current time position of the animation in milliseconds. Can be set to seek to a specific time.
progress
Current progress of the animation as a value between 0 and 1. Can be set to seek to a specific progress point.
iterationProgress
iterationProgress: number
currentIteration
The current iteration (loop) index, starting from 0.
Methods
play()
Starts or resumes the animation.
Returns: The animation instance for chaining.
Example:
const anim = animate('.box', {
translateX: 250,
autoplay: false
});
anim.play();
pause()
Pauses the animation.
Returns: The animation instance for chaining.
Example:
const anim = animate('.box', { translateX: 250 });
setTimeout(() => {
anim.pause();
}, 500);
restart()
Restarts the animation from the beginning.
Returns: The animation instance for chaining.
Example:
const anim = animate('.box', { translateX: 250 });
button.addEventListener('click', () => {
anim.restart();
});
reverse()
Reverses the animation direction and plays.
Returns: The animation instance for chaining.
Example:
const anim = animate('.box', { translateX: 250 });
anim.reverse();
seek()
Seeks to a specific time in the animation.
seek(
time: number,
muteCallbacks?: boolean | number,
internalRender?: boolean | number
): this
The time position to seek to in milliseconds
muteCallbacks
boolean | number
default:"false"
Whether to suppress callback execution during seek
internalRender
boolean | number
default:"false"
Internal rendering flag
const anim = animate('.box', {
translateX: 250,
duration: 1000,
autoplay: false
});
anim.seek(500); // Seek to 50% complete
cancel()
Cancels the animation and removes it from the animation engine.
Returns: The animation instance for chaining.
Example:
const anim = animate('.box', { translateX: 250 });
anim.cancel();
revert()
Cancels the animation and reverts all animated properties to their original values.
Returns: The animation instance for chaining.
Example:
const anim = animate('.box', {
translateX: 250,
scale: 2
});
// Later, revert back to original state
anim.revert();
complete()
Immediately completes the animation, jumping to the end state.
complete(muteCallbacks?: boolean | number): this
muteCallbacks
boolean | number
default:"false"
Whether to suppress the onComplete callback
const anim = animate('.box', { translateX: 250, duration: 2000 });
anim.complete(); // Jump to end immediately
stretch()
Stretches or compresses the animation duration.
stretch(newDuration: number): this
The new duration in milliseconds
const anim = animate('.box', {
translateX: 250,
duration: 1000
});
// Make it twice as slow
anim.stretch(2000);
refresh()
Refreshes function-based values in the animation. Useful when you need to recalculate values based on changed conditions.
Returns: The animation instance for chaining.
Example:
let endValue = 250;
const anim = animate('.box', {
translateX: () => endValue,
duration: 1000,
loop: true
});
// Change the end value and refresh
endValue = 500;
anim.refresh();
reset()
Resets the animation to its initial state.
reset(softReset?: boolean): this
Whether to perform a soft reset (internal use)
then()
Returns a Promise that resolves when the animation completes. Enables async/await syntax.
then(callback?: (anim: JSAnimation) => void): Promise<JSAnimation>
callback
(anim: JSAnimation) => void
Optional callback to execute when the animation completes
// Using .then()
animate('.box', { translateX: 250 })
.then(anim => {
console.log('Animation completed!');
return animate('.box', { translateY: 250 });
})
.then(anim => {
console.log('Second animation completed!');
});
// Using async/await
async function animateSequence() {
await animate('.box', { translateX: 250 });
console.log('First animation done');
await animate('.box', { translateY: 250 });
console.log('Second animation done');
}
Callback Properties
onBegin
onBegin: (anim: JSAnimation) => void
onUpdate
onUpdate: (anim: JSAnimation) => void
onComplete
onComplete: (anim: JSAnimation) => void
onLoop
onLoop: (anim: JSAnimation) => void
onRender
onRender: (anim: JSAnimation) => void
Example: Full Control
import { animate } from 'animejs';
const anim = animate('.box', {
translateX: 250,
duration: 1000,
autoplay: false,
onBegin: (anim) => console.log('Started'),
onUpdate: (anim) => console.log('Progress:', anim.progress),
onComplete: (anim) => console.log('Completed')
});
// Control buttons
document.querySelector('#play').onclick = () => anim.play();
document.querySelector('#pause').onclick = () => anim.pause();
document.querySelector('#restart').onclick = () => anim.restart();
document.querySelector('#reverse').onclick = () => anim.reverse();
// Seek slider
document.querySelector('#slider').oninput = (e) => {
anim.seek(anim.duration * (e.target.value / 100));
};
// Check state
console.log('Is paused:', anim.paused);
console.log('Current time:', anim.currentTime);
console.log('Progress:', anim.progress);