# Table of Contents - [Documentation | Anime.js | JavaScript Animation Engine](#documentation-anime-js-javascript-animation-engine) - [Getting started | Anime.js | JavaScript Animation Engine](#getting-started-anime-js-javascript-animation-engine) - [Installation | Anime.js | JavaScript Animation Engine](#installation-anime-js-javascript-animation-engine) - [Imports | Anime.js | JavaScript Animation Engine](#imports-anime-js-javascript-animation-engine) - [Using with vanilla JS | Anime.js | JavaScript Animation Engine](#using-with-vanilla-js-anime-js-javascript-animation-engine) - [Using with React | Anime.js | JavaScript Animation Engine](#using-with-react-anime-js-javascript-animation-engine) - [Timer | Anime.js | JavaScript Animation Engine](#timer-anime-js-javascript-animation-engine) - [Timer playback settings | Anime.js | JavaScript Animation Engine](#timer-playback-settings-anime-js-javascript-animation-engine) - [delay | Anime.js | JavaScript Animation Engine](#delay-anime-js-javascript-animation-engine) - [duration | Anime.js | JavaScript Animation Engine](#duration-anime-js-javascript-animation-engine) - [reversed | Anime.js | JavaScript Animation Engine](#reversed-anime-js-javascript-animation-engine) - [autoplay | Anime.js | JavaScript Animation Engine](#autoplay-anime-js-javascript-animation-engine) - [loop | Anime.js | JavaScript Animation Engine](#loop-anime-js-javascript-animation-engine) - [loopDelay | Anime.js | JavaScript Animation Engine](#loopdelay-anime-js-javascript-animation-engine) - [Timer callbacks | Anime.js | JavaScript Animation Engine](#timer-callbacks-anime-js-javascript-animation-engine) - [onUpdate | Anime.js | JavaScript Animation Engine](#onupdate-anime-js-javascript-animation-engine) - [playbackRate | Anime.js | JavaScript Animation Engine](#playbackrate-anime-js-javascript-animation-engine) - [onBegin | Anime.js | JavaScript Animation Engine](#onbegin-anime-js-javascript-animation-engine) - [alternate | Anime.js | JavaScript Animation Engine](#alternate-anime-js-javascript-animation-engine) - [frameRate | Anime.js | JavaScript Animation Engine](#framerate-anime-js-javascript-animation-engine) - [onComplete | Anime.js | JavaScript Animation Engine](#oncomplete-anime-js-javascript-animation-engine) - [onLoop | Anime.js | JavaScript Animation Engine](#onloop-anime-js-javascript-animation-engine) - [onPause | Anime.js | JavaScript Animation Engine](#onpause-anime-js-javascript-animation-engine) - [Timer methods | Anime.js | JavaScript Animation Engine](#timer-methods-anime-js-javascript-animation-engine) - [play() | Anime.js | JavaScript Animation Engine](#play-anime-js-javascript-animation-engine) - [reverse() | Anime.js | JavaScript Animation Engine](#reverse-anime-js-javascript-animation-engine) - [pause() | Anime.js | JavaScript Animation Engine](#pause-anime-js-javascript-animation-engine) - [then() | Anime.js | JavaScript Animation Engine](#then-anime-js-javascript-animation-engine) - [restart() | Anime.js | JavaScript Animation Engine](#restart-anime-js-javascript-animation-engine) - [resume() | Anime.js | JavaScript Animation Engine](#resume-anime-js-javascript-animation-engine) - [alternate() | Anime.js | JavaScript Animation Engine](#alternate-anime-js-javascript-animation-engine) - [cancel() | Anime.js | JavaScript Animation Engine](#cancel-anime-js-javascript-animation-engine) - [revert() | Anime.js | JavaScript Animation Engine](#revert-anime-js-javascript-animation-engine) - [complete() | Anime.js | JavaScript Animation Engine](#complete-anime-js-javascript-animation-engine) - [stretch() | Anime.js | JavaScript Animation Engine](#stretch-anime-js-javascript-animation-engine) - [seek() | Anime.js | JavaScript Animation Engine](#seek-anime-js-javascript-animation-engine) - [Timer properties | Anime.js | JavaScript Animation Engine](#timer-properties-anime-js-javascript-animation-engine) - [CSS Selector | Anime.js | JavaScript Animation Engine](#css-selector-anime-js-javascript-animation-engine) - [Animation | Anime.js | JavaScript Animation Engine](#animation-anime-js-javascript-animation-engine) - [DOM Elements | Anime.js | JavaScript Animation Engine](#dom-elements-anime-js-javascript-animation-engine) - [Targets | Anime.js | JavaScript Animation Engine](#targets-anime-js-javascript-animation-engine) - [JavaScript Objects | Anime.js | JavaScript Animation Engine](#javascript-objects-anime-js-javascript-animation-engine) - [Array of targets | Anime.js | JavaScript Animation Engine](#array-of-targets-anime-js-javascript-animation-engine) - [CSS Properties | Anime.js | JavaScript Animation Engine](#css-properties-anime-js-javascript-animation-engine) - [Animatable properties | Anime.js | JavaScript Animation Engine](#animatable-properties-anime-js-javascript-animation-engine) - [CSS Variables | Anime.js | JavaScript Animation Engine](#css-variables-anime-js-javascript-animation-engine) - [JavaScript Object properties | Anime.js | JavaScript Animation Engine](#javascript-object-properties-anime-js-javascript-animation-engine) - [CSS transforms | Anime.js | JavaScript Animation Engine](#css-transforms-anime-js-javascript-animation-engine) - [HTML Attributes | Anime.js | JavaScript Animation Engine](#html-attributes-anime-js-javascript-animation-engine) - [Unit conversion value | Anime.js | JavaScript Animation Engine](#unit-conversion-value-anime-js-javascript-animation-engine) - [Tween value types | Anime.js | JavaScript Animation Engine](#tween-value-types-anime-js-javascript-animation-engine) - [SVG Attributes | Anime.js | JavaScript Animation Engine](#svg-attributes-anime-js-javascript-animation-engine) - [Relative value | Anime.js | JavaScript Animation Engine](#relative-value-anime-js-javascript-animation-engine) - [Numerical value | Anime.js | JavaScript Animation Engine](#numerical-value-anime-js-javascript-animation-engine) - [Color function value | Anime.js | JavaScript Animation Engine](#color-function-value-anime-js-javascript-animation-engine) - [CSS variable | Anime.js | JavaScript Animation Engine](#css-variable-anime-js-javascript-animation-engine) - [Color value | Anime.js | JavaScript Animation Engine](#color-value-anime-js-javascript-animation-engine) - [Function based value | Anime.js | JavaScript Animation Engine](#function-based-value-anime-js-javascript-animation-engine) - [Tween parameters | Anime.js | JavaScript Animation Engine](#tween-parameters-anime-js-javascript-animation-engine) - [to | Anime.js | JavaScript Animation Engine](#to-anime-js-javascript-animation-engine) - [from | Anime.js | JavaScript Animation Engine](#from-anime-js-javascript-animation-engine) - [delay | Anime.js | JavaScript Animation Engine](#delay-anime-js-javascript-animation-engine) - [duration | Anime.js | JavaScript Animation Engine](#duration-anime-js-javascript-animation-engine) - [composition | Anime.js | JavaScript Animation Engine](#composition-anime-js-javascript-animation-engine) - [ease | Anime.js | JavaScript Animation Engine](#ease-anime-js-javascript-animation-engine) - [Keyframes | Anime.js | JavaScript Animation Engine](#keyframes-anime-js-javascript-animation-engine) - [modifier | Anime.js | JavaScript Animation Engine](#modifier-anime-js-javascript-animation-engine) - [Tween parameters keyframes | Anime.js | JavaScript Animation Engine](#tween-parameters-keyframes-anime-js-javascript-animation-engine) - [Tween values keyframes | Anime.js | JavaScript Animation Engine](#tween-values-keyframes-anime-js-javascript-animation-engine) - [Duration based keyframes | Anime.js | JavaScript Animation Engine](#duration-based-keyframes-anime-js-javascript-animation-engine) - [Animation playback settings | Anime.js | JavaScript Animation Engine](#animation-playback-settings-anime-js-javascript-animation-engine) - [Percentage based keyframes | Anime.js | JavaScript Animation Engine](#percentage-based-keyframes-anime-js-javascript-animation-engine) - [delay | Anime.js | JavaScript Animation Engine](#delay-anime-js-javascript-animation-engine) - [loop | Anime.js | JavaScript Animation Engine](#loop-anime-js-javascript-animation-engine) - [duration | Anime.js | JavaScript Animation Engine](#duration-anime-js-javascript-animation-engine) - [loopDelay | Anime.js | JavaScript Animation Engine](#loopdelay-anime-js-javascript-animation-engine) --- # Documentation | Anime.js | JavaScript Animation Engine Documentation Search [Documentation](/documentation "Documentation") ================================================ This documentation is only made possible with the help of my sponsors --------------------------------------------------------------------- Anime.js is developed and maintained with the generous support of my sponsors. If you're using Anime.js, a monthly contribution would be highly valuable. Platinum sponsors ----------------- **In this section** * [Getting started](/documentation/getting-started "Getting started") * [Timer](/documentation/timer "Timer") * [Animation](/documentation/animation "Animation") * [Timeline](/documentation/timeline "Timeline") * [Animatable](/documentation/animatable "Animatable") * [Draggable](/documentation/draggable "Draggable") * [ScrollObserver](/documentation/scroll "ScrollObserver") * [Scope](/documentation/scope "Scope") * [Stagger](/documentation/stagger "Stagger") * [SVG](/documentation/svg "SVG") * [Utilities](/documentation/utilities "Utilities") * [WAAPI](/documentation/web-animation-api "Web Animation API") * [Engine](/documentation/engine "Engine") **Next** * [Getting started](/documentation/getting-started "Getting started") --- # Getting started | Anime.js | JavaScript Animation Engine Getting started Search [Getting started](/documentation/getting-started "Getting started") ==================================================================== This section covers how to download, install and import Anime.js in your project. **In this section** * [Installation](/documentation/getting-started/installation "Installation") * [Imports](/documentation/getting-started/imports "Imports") * [Using with vanilla JS](/documentation/getting-started/using-with-vanilla-js "Using with vanilla JS") * [Using with React](/documentation/getting-started/using-with-react "Using with React") **Previous** **Next** * [Documentation](/documentation "Documentation") * [Installation](/documentation/getting-started/installation "Installation") --- # Installation | Anime.js | JavaScript Animation Engine Installation Search [Getting started](/documentation/getting-started "Getting started") [Installation](/documentation/getting-started/installation "Installation") =========================================================================== Anime.js can be installed in multiple ways depending of your environment or workflow. This section covers differents methods of installation. Installation via NPM and a bundler ---------------------------------- If you're using a bundler like [Vite](https://vitejs.dev/) or [esbuild](https://esbuild.github.io/) , simply install the package via [NPM](https://www.npmjs.com/package/animejs) . npm install animejs Then import _Anime.js_ methods as **ES6 Modules** like this: import { animate } from 'animejs'; Linking from a CDN ------------------ Anime.js is available from the following CDNs: | CDN Name | URL | | --- | --- | | JsDelivr | [jsdelivr.com](https://www.jsdelivr.com/package/npm/animejs?tab=files) | | CDNJS | [cdnjs.com](https://cdnjs.com/libraries/animejs) | ### ES6 Modules ### Global object Direct download from GitHub --------------------------- If you prefer to download the Anime.js library manually, you can also simply grab the code from the official GitHub repository: [github.com/juliangarnier/anime](https://github.com/juliangarnier/anime) . The following versions are available in the `/lib` directory: | File name | Type | | --- | --- | | `anime.esm.js` | ES6 Module | | `anime.umd.js` | Universal Module | | `anime.iife.js` | Global object | | `anime.iife.es5.js` | Global object ES5 | Once downloaded inside your project folder, link the library in your code like this: ### ES6 Modules ### UMD Modules ### Global object **Previous** **Next** * [Getting started](/documentation/getting-started "Getting started") * [Imports](/documentation/getting-started/imports "Imports") --- # Imports | Anime.js | JavaScript Animation Engine Imports Search [Getting started](/documentation/getting-started "Getting started") [Imports V4](/documentation/getting-started/imports "Imports") =============================================================== Anime.js v4 API exposes the following modules: Import methods -------------- ### ES Modules To import _Anime.js_ using the ES Modules syntax, you can use the `import` statement as shown below: import { animate, createTimeline, createTimer, // ...other methods } from 'animejs'; ### Global object You can define _Anime.js_ globally using a script tag like this: Then access all the modules directly from `anime` object: anime.animate(); anime.createTimeline(); anime.createTimer(); // ...other methods Or you can mimic the ESM import syntax by using the [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) syntax like this: const { animate, createTimeline, createTimer, // ...other methods } = anime; **Previous** **Next** * [Installation](/documentation/getting-started/installation "Installation") * [Using with vanilla JS](/documentation/getting-started/using-with-vanilla-js "Using with vanilla JS") --- # Using with vanilla JS | Anime.js | JavaScript Animation Engine Using with vanilla JS Search [Getting started](/documentation/getting-started "Getting started") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [Using with vanilla JS](/documentation/getting-started/using-with-vanilla-js "Using with vanilla JS") ====================================================================================================== Using Anime.js in vanilla JavaScript is pretty straightforward, simply import the modules you need and start animating. The following example showcase how to uses Anime.js methods with a vanilla JS code base. import { animate, utils, createSpring } from 'animejs'; const [ $logo ] = utils.$('.logo.js'); const [ $button ] = utils.$('button'); let rotations = 0; // Created a bounce animation loop animate('.logo.js', { scale: [\ { to: 1.25, ease: 'inOut(3)', duration: 200 },\ { to: 1, ease: createSpring({ stiffness: 300 }) }\ ], loop: true, loopDelay: 250, }); // Make the logo draggable around its center createDraggable('.logo.js', { container: [0, 0, 0, 0], releaseEase: createSpring({ stiffness: 200 }) }); // Animate logo rotation on click const rotateLogo = () => { rotations++; $button.innerText = `rotations: ${rotations}`; animate($logo, { rotate: rotations * 360, ease: 'out(4)', duration: 1500, }); } $button.addEventListener('click', rotateLogo);
**Previous** **Next** * [Imports](/documentation/getting-started/imports "Imports") * [Using with React](/documentation/getting-started/using-with-react "Using with React") --- # Using with React | Anime.js | JavaScript Animation Engine Using with React Search [Getting started](/documentation/getting-started "Getting started") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [Using with React](/documentation/getting-started/using-with-react "Using with React") ======================================================================================= Anime.js can be used with React by combining React's `useEffect()` and Anime.js `createScope()` methods. The following example showcase how to uses Anime.js methods straight into React code. import { animate, createScope, createSpring, createDraggable } from 'animejs'; import { useEffect, useRef, useState } from 'react'; import reactLogo from './assets/react.svg'; import './App.css'; function App() { const root = useRef(null); const scope = useRef(null); const [ rotations, setRotations ] = useState(0); useEffect(() => { scope.current = createScope({ root }).add( scope => { // Every anime.js instances declared here are now scopped to
// Created a bounce animation loop animate('.logo', { scale: [\ { to: 1.25, ease: 'inOut(3)', duration: 200 },\ { to: 1, ease: createSpring({ stiffness: 300 }) }\ ], loop: true, loopDelay: 250, }); // Make the logo draggable around its center createDraggable('.logo', { container: [0, 0, 0, 0], releaseEase: createSpring({ stiffness: 200 }) }); // Register function methods to be used outside the useEffect scope.add('rotateLogo', (i) => { animate('.logo', { rotate: i * 360, ease: 'out(4)', duration: 1500, }); }); }); // Properly cleanup all anime.js instances declared inside the scope return () => scope.current.revert() }, []); const handleClick = () => { const i = rotations + 1; setRotations(i); // Animate logo rotation on click using the method declared inside the scope scope.current.methods.rotateLogo(i); }; return (
React logo
) } export default App; **Previous** **Next** * [Using with vanilla JS](/documentation/getting-started/using-with-vanilla-js "Using with vanilla JS") * [Timer](/documentation/timer "Timer") --- # Timer | Anime.js | JavaScript Animation Engine Timer Search [Timer V4](/documentation/timer "Timer") ========================================= Schedules and controls timed function callbacks that can be used as a replacement to `setTimeout()` or `setInterval()`, keeping animations and callbacks in sync. ----------------------------------------------------------------------------------------------------------------------------------------------------------------- Timers are created using the `createTimer()` function. import { createTimer } from 'animejs'; const timer = createTimer(parameters); Parameters ---------- | Name | Accepts | | --- | --- | | parameters (opt) | An `Object` of [Timer playback settings](/documentation/timer/timer-playback-settings "Timer playback settings")
and [Timer callbacks](/documentation/timer/timer-callbacks "Timer callbacks") | Returns ------- Timer import { animate } from 'animejs'; const [ $time, $count ] = utils.$('.value'); createTimer({ duration: 1000, loop: true, frameRate: 30, onUpdate: self => $time.innerHTML = self.currentTime, onLoop: self => $count.innerHTML = self._currentIteration }); 
          current time
          0
        
          callback fired
          0
**In this section** * [Playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") * [Callbacks](/documentation/timer/timer-callbacks "Timer callbacks") * [Methods](/documentation/timer/timer-methods "Timer methods") * [Properties](/documentation/timer/timer-properties "Timer properties") **Previous** **Next** * [Getting started](/documentation/getting-started "Getting started") * [Timer playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") --- # Timer playback settings | Anime.js | JavaScript Animation Engine Timer playback settings Search [Timer](/documentation/timer "Timer") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [Timer playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") ================================================================================================== Specify the timings and behaviours of a timer. Playback settings properties are defined directly in the `createTimer()` parameters `Object`. createTimer({ ┌───────────────────┐ │ duration: 1000, │ │ frameRate: true, ├─ Playback Settings │ loop: true, │ └───────────────────┘ onBegin: () => {}, onLoop: () => {}, onUpdate: () => {}, }); **In this section** * [delay](/documentation/timer/timer-playback-settings/delay "delay") * [duration](/documentation/timer/timer-playback-settings/duration "duration") * [loop](/documentation/timer/timer-playback-settings/loop "loop") * [loopDelay](/documentation/timer/timer-playback-settings/playback-loopdelay "loopDelay") * [alternate](/documentation/timer/timer-playback-settings/alternate "alternate") * [reversed](/documentation/timer/timer-playback-settings/reversed "reversed") * [autoplay](/documentation/timer/timer-playback-settings/autoplay "autoplay") * [frameRate](/documentation/timer/timer-playback-settings/framerate "frameRate") * [playbackRate](/documentation/timer/timer-playback-settings/playbackrate "playbackRate") **Previous** **Next** * [Timer](/documentation/timer "Timer") * [delay](/documentation/timer/timer-playback-settings/delay "delay") --- # delay | Anime.js | JavaScript Animation Engine delay Search [Timer](/documentation/timer "Timer")  [Playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [delay](/documentation/timer/timer-playback-settings/delay "delay") ==================================================================== Defines the time in milliseconds before the timer starts. Accepts ------- A `Number` equal to or greater than `0` Default ------- `0` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.delay = 500; import { createTimer, utils } from 'animejs'; const [ $time ] = utils.$('.time'); createTimer({ delay: 2000, onUpdate: self => $time.innerHTML = self.currentTime }); 
          current time
          0
**Previous** **Next** * [Timer playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") * [duration](/documentation/timer/timer-playback-settings/duration "duration") --- # duration | Anime.js | JavaScript Animation Engine duration Search [Timer](/documentation/timer "Timer")  [Playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [duration](/documentation/timer/timer-playback-settings/duration "duration") ============================================================================= Defines the duration in milliseconds of the timer. Setting `0` to a duration completes the timer instantly upon play. Accepts ------- A `Number` equal to or greater than `0` Duration values higher than `1e12` are clamped internally to `1e12` (Or approximatively 32 years). Default ------- `Infinity` import { createTimer, utils } from 'animejs'; const [ $time ] = utils.$('.time'); createTimer({ duration: 2000, onUpdate: self => $time.innerHTML = self.currentTime }); 
          current time
          0
**Previous** **Next** * [delay](/documentation/timer/timer-playback-settings/delay "delay") * [loop](/documentation/timer/timer-playback-settings/loop "loop") --- # reversed | Anime.js | JavaScript Animation Engine reversed Search [Timer](/documentation/timer "Timer")  [Playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [reversed](/documentation/timer/timer-playback-settings/reversed "reversed") ============================================================================= Sets the initial direction of the timer. The timer `currentTime` always progresses from `0` to `duration`. Only the `iterationTime` property is actually reversed. Accepts ------- `Boolean` * If set to `true` the timer's first iteration runs in reverse * If set to `false` the timer's first iteration runs normally Default ------- `false` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.reversed = true; import { animate } from 'animejs'; const [ $iterationTime ] = utils.$('.iteration-time'); const [ $currentTime ] = utils.$('.current-time'); createTimer({ duration: 10000, reversed: true, onUpdate: self => { $iterationTime.innerHTML = self.iterationCurrentTime; $currentTime.innerHTML = self.currentTime; } }); 
          iteration time
          0
        
          current time
          0
**Previous** **Next** * [alternate](/documentation/timer/timer-playback-settings/alternate "alternate") * [autoplay](/documentation/timer/timer-playback-settings/autoplay "autoplay") --- # autoplay | Anime.js | JavaScript Animation Engine autoplay Search [Timer](/documentation/timer "Timer")  [Playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [autoplay](/documentation/timer/timer-playback-settings/autoplay "autoplay") ============================================================================= Defines the play mode of a timer. The autoplay parameter has no effect when the timer is added to a timeline, and will be overridden to `false`. Accepts ------- `Boolean` | [`onScroll()`](/documentation/scroll "Scroll") * If set to `true` the timer plays automatically * If set to `false` the timer has to be manually played * If set to [`onScroll()`](/documentation/scroll "Scroll") the timer will starts when the [scroll thresholds](/documentation/scroll/scrollobserver-thresholds "scroll thresholds") conditions are met Default ------- `true` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.autoplay = false; const [ $time ] = utils.$('.time'); const [ $playButton ] = utils.$('.play'); const timer = createTimer({ autoplay: false, onUpdate: self => $time.innerHTML = self.currentTime }); const playTimer = () => timer.play(); $playButton.addEventListener('click', playTimer); 
          current time
          0
**Previous** **Next** * [reversed](/documentation/timer/timer-playback-settings/reversed "reversed") * [frameRate](/documentation/timer/timer-playback-settings/framerate "frameRate") --- # loop | Anime.js | JavaScript Animation Engine loop Search [Timer](/documentation/timer "Timer")  [Playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [loop](/documentation/timer/timer-playback-settings/loop "loop") ================================================================= Defines how many times a timer repeats. Accepts ------- | Value | Effect | | --- | --- | | `Number` | The number of loops in the range `[0, Infinity]` | | `Infinity` | Loop indefinitely | | `true` | Equivalent to `Infinity` | | `-1` | Equivalent to `Infinity` | Default ------- `0` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.loop = true; import { createTimer, utils } from 'animejs'; const [ $loops ] = utils.$('.loops'); const [ $time ] = utils.$('.time'); let loops = 0; createTimer({ loop: true, duration: 1000, onLoop: () => $loops.innerHTML = ++loops, onUpdate: self => $time.innerHTML = self.iterationCurrentTime }); 
          loops count
          0
        
          iteration time
          0
**Previous** **Next** * [duration](/documentation/timer/timer-playback-settings/duration "duration") * [loopDelay](/documentation/timer/timer-playback-settings/playback-loopdelay "loopDelay") --- # loopDelay | Anime.js | JavaScript Animation Engine loopDelay Search [Timer](/documentation/timer "Timer")  [Playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [loopDelay](/documentation/timer/timer-playback-settings/playback-loopdelay "loopDelay") ========================================================================================= Defines the delay in milliseconds between loops. Accepts ------- A `Number` equal to or greater than `0` Default ------- `0` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.loopDelay = 500; import { createTimer, utils } from 'animejs'; const [ $loops ] = utils.$('.loops'); const [ $time ] = utils.$('.time'); let loops = 0; createTimer({ loop: true, loopDelay: 750, duration: 250, onLoop: () => $loops.innerHTML = ++loops, onUpdate: self => $time.innerHTML = utils.clamp(self.iterationCurrentTime, 0, 250) }); 
          loops count
          0
        
          iteration time
          0
**Previous** **Next** * [loop](/documentation/timer/timer-playback-settings/loop "loop") * [alternate](/documentation/timer/timer-playback-settings/alternate "alternate") --- # Timer callbacks | Anime.js | JavaScript Animation Engine Timer callbacks Search [Timer](/documentation/timer "Timer") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [Timer callbacks](/documentation/timer/timer-callbacks "Timer callbacks") ========================================================================== Execute functions at specific points during a timer playback. Callbacks `Function` are specified directly in the `createTimer()` parameters `Object`. createTimer({ duration: 1000, frameRate: true, loop: true, ┌─────────────────────┐ │ onBegin: () => {}, │ │ onLoop: () => {}, ├─ Callbacks │ onUpdate: () => {}, │ └─────────────────────┘ }); **In this section** * [onBegin](/documentation/timer/timer-callbacks/onbegin "onBegin") * [onComplete](/documentation/timer/timer-callbacks/oncomplete "onComplete") * [onUpdate](/documentation/timer/timer-callbacks/onupdate "onUpdate") * [onLoop](/documentation/timer/timer-callbacks/onloop "onLoop") * [onPause](/documentation/timer/timer-callbacks/onpause "onPause") * [then()](/documentation/timer/timer-callbacks/then "then()") **Previous** **Next** * [Timer playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") * [onBegin](/documentation/timer/timer-callbacks/onbegin "onBegin") --- # onUpdate | Anime.js | JavaScript Animation Engine onUpdate Search [Timer](/documentation/timer "Timer")  [Callbacks](/documentation/timer/timer-callbacks "Timer callbacks") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [onUpdate](/documentation/timer/timer-callbacks/onupdate "onUpdate") ===================================================================== Executes a function on every frames of a running timer at the specified [`frameRate`](/documentation/timer/timer-playback-settings/framerate "frameRate") . Accepts ------- A `Function` whose first argument returns the timer itself Default ------- `noop` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.onUpdate = self => console.log(self.id); import { createTimer, utils } from 'animejs'; const [ $updates ] = utils.$('.updates'); const [ $time ] = utils.$('.time'); let updates = 0; createTimer({ onUpdate: self => { $updates.innerHTML = ++updates; $time.innerHTML = self.currentTime; } }); 
          updates
          0
        
          current time
          0
**Previous** **Next** * [onComplete](/documentation/timer/timer-callbacks/oncomplete "onComplete") * [onLoop](/documentation/timer/timer-callbacks/onloop "onLoop") --- # playbackRate | Anime.js | JavaScript Animation Engine playbackRate Search [Timer](/documentation/timer "Timer")  [Playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [playbackRate](/documentation/timer/timer-playback-settings/playbackrate "playbackRate") ========================================================================================= Defines a speed multiplier to speed up or slow down a timer playback (`1.0` is normal speed). This value can be modified later with `timer.speed = .5`. Accepts ------- A `Number` greater than or equal to `0` If set to `0` the timer won't play. Default ------- `1` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.playbackRate = .75; import { createTimer, utils } from 'animejs'; const [ $range ] = utils.$('.range'); const [ $speed ] = utils.$('.speed'); const [ $time ] = utils.$('.time'); const timer = createTimer({ playbackRate: 2, onUpdate: self => $time.innerHTML = utils.round(self.currentTime, 0), }); const updateSpeed = () => { const speed = utils.roundPad(+$range.value, 1); $speed.innerHTML = speed; utils.sync(() => timer.speed = speed); } $range.addEventListener('input', updateSpeed); 
          speed
          2.0
        
          current time
          0
**Previous** **Next** * [frameRate](/documentation/timer/timer-playback-settings/framerate "frameRate") * [Timer callbacks](/documentation/timer/timer-callbacks "Timer callbacks") --- # onBegin | Anime.js | JavaScript Animation Engine onBegin Search [Timer](/documentation/timer "Timer")  [Callbacks](/documentation/timer/timer-callbacks "Timer callbacks") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [onBegin](/documentation/timer/timer-callbacks/onbegin "onBegin") ================================================================== Executes a function when a timer starts. Accepts ------- A `Function` whose first argument returns the timer itself Default ------- `noop` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.onBegin = self => console.log(self.id); import { createTimer, utils } from 'animejs'; const [ $status ] = utils.$('.status'); const [ $time ] = utils.$('.time'); const timer = createTimer({ delay: 2000, duration: 2000, onBegin: self => $status.innerHTML = 'true' }); const logTimer = createTimer({ duration: 4000, onUpdate: self => $time.innerHTML = timer.currentTime }); 
          began
          false
        
          current time
          0
**Previous** **Next** * [Timer callbacks](/documentation/timer/timer-callbacks "Timer callbacks") * [onComplete](/documentation/timer/timer-callbacks/oncomplete "onComplete") --- # alternate | Anime.js | JavaScript Animation Engine alternate Search [Timer](/documentation/timer "Timer")  [Playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [alternate](/documentation/timer/timer-playback-settings/alternate "alternate") ================================================================================ Defines if the direction of the timer alternates on each iteration when the [`loop`](/documentation/timer/timer-playback-settings/loop "loop") is set to `true` or superior to `1`. Accepts ------- `Boolean` Default ------- `false` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.alternate = true; import { animate } from 'animejs'; const [ $loops ] = utils.$('.loops'); const [ $time ] = utils.$('.time'); let loops = 0; createTimer({ loop: true, duration: 1000, alternate: true, onLoop: () => $loops.innerHTML = ++loops, onUpdate: self => $time.innerHTML = self.iterationCurrentTime }); 
          loops count
          0
        
          iteration time
          0
**Previous** **Next** * [loopDelay](/documentation/timer/timer-playback-settings/playback-loopdelay "loopDelay") * [reversed](/documentation/timer/timer-playback-settings/reversed "reversed") --- # frameRate | Anime.js | JavaScript Animation Engine frameRate Search [Timer](/documentation/timer "Timer")  [Playback settings](/documentation/timer/timer-playback-settings "Timer playback settings") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [frameRate](/documentation/timer/timer-playback-settings/framerate "frameRate") ================================================================================ Determines the frames per second (fps) at which a timer runs. This value can be modified later with `timer.fps = 30`. Accepts ------- A `Number` greater than `0` The frame rate is capped to the monitor refresh rate or in some cases by the browser itself. Default ------- `120` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.frameRate = 30; import { createTimer, utils } from 'animejs'; const [ $range ] = utils.$('.range'); const [ $fps ] = utils.$('.fps'); const [ $time ] = utils.$('.time'); const timer = createTimer({ frameRate: 60, onUpdate: self => $time.innerHTML = self.currentTime, }); const updateFps = () => { const { value } = $range; $fps.innerHTML = value; timer.fps = value; } $range.addEventListener('input', updateFps); 
          fps
          60
        
          current time
          0
**Previous** **Next** * [autoplay](/documentation/timer/timer-playback-settings/autoplay "autoplay") * [playbackRate](/documentation/timer/timer-playback-settings/playbackrate "playbackRate") --- # onComplete | Anime.js | JavaScript Animation Engine onComplete Search [Timer](/documentation/timer "Timer")  [Callbacks](/documentation/timer/timer-callbacks "Timer callbacks") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [onComplete](/documentation/timer/timer-callbacks/oncomplete "onComplete") =========================================================================== Executes a function when all the iterations ([`loop`](/documentation/timer/timer-playback-settings/loop "loop") ) of a timer have finished playing. Accepts ------- A `Function` whose first argument returns the timer itself Default ------- `noop` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.onComplete = self => console.log(self.id); import { createTimer, utils } from 'animejs'; const [ $status ] = utils.$('.status'); const [ $time ] = utils.$('.time'); createTimer({ duration: 2000, onComplete: self => $status.innerHTML = 'true', onUpdate: self => $time.innerHTML = self.currentTime }); 
          completed
          false
        
          current time
          0
**Previous** **Next** * [onBegin](/documentation/timer/timer-callbacks/onbegin "onBegin") * [onUpdate](/documentation/timer/timer-callbacks/onupdate "onUpdate") --- # onLoop | Anime.js | JavaScript Animation Engine onLoop Search [Timer](/documentation/timer "Timer")  [Callbacks](/documentation/timer/timer-callbacks "Timer callbacks") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [onLoop](/documentation/timer/timer-callbacks/onloop "onLoop") =============================================================== Executes a function every time a timer iteration completes. Accepts ------- A `Function` whose first argument returns the timer itself Default ------- `noop` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.onLoop = self => console.log(self.id); import { createTimer, utils } from 'animejs'; const [ $loops ] = utils.$('.loops'); const [ $time ] = utils.$('.time'); let loops = 0; createTimer({ loop: true, duration: 1000, onLoop: self => $loops.innerHTML = ++loops, onUpdate: self => $time.innerHTML = self.iterationCurrentTime, }); 
          loops
          0
        
          iteration time
          0
**Previous** **Next** * [onUpdate](/documentation/timer/timer-callbacks/onupdate "onUpdate") * [onPause](/documentation/timer/timer-callbacks/onpause "onPause") --- # onPause | Anime.js | JavaScript Animation Engine onPause Search [Timer](/documentation/timer "Timer")  [Callbacks](/documentation/timer/timer-callbacks "Timer callbacks") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [onPause](/documentation/timer/timer-callbacks/onpause "onPause") ================================================================== Executes a function when a running timer is paused. Accepts ------- A `Function` whose first argument returns the timer itself Default ------- `noop` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.onPause = self => console.log(self.id); import { createTimer, utils } from 'animejs'; const [ $resumeButton, $pauseButton ] = utils.$('.button'); const [ $paused ] = utils.$('.paused'); const [ $time ] = utils.$('.time'); let paused = 0; const timer = createTimer({ onPause: () => $paused.innerHTML = ++paused, onUpdate: self => $time.innerHTML = self.currentTime }); const pauseTimer = () => timer.pause(); const resumeTimer = () => timer.resume(); $resumeButton.addEventListener('click', resumeTimer); $pauseButton.addEventListener('click', pauseTimer); 
          paused
          0
        
          elapsed time
          0
**Previous** **Next** * [onLoop](/documentation/timer/timer-callbacks/onloop "onLoop") * [then()](/documentation/timer/timer-callbacks/then "then()") --- # Timer methods | Anime.js | JavaScript Animation Engine Timer methods Search [Timer](/documentation/timer "Timer") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [Timer methods](/documentation/timer/timer-methods "Timer methods") ==================================================================== Provide control over the timing, behaviour and progression of a timer. Timer methods are available on a Timer instance `Object`. const timer = createTimer(parameters); ┌──────────┐ timer.│pause() │ timer.│play() ├─ Methods timer.│restart() │ └──────────┘ **In this section** * [play()](/documentation/timer/timer-methods/play "play()") * [reverse()](/documentation/timer/timer-methods/reverse "reverse()") * [pause()](/documentation/timer/timer-methods/pause "pause()") * [restart()](/documentation/timer/timer-methods/restart "restart()") * [alternate()](/documentation/timer/timer-methods/alternate "alternate()") * [resume()](/documentation/timer/timer-methods/resume "resume()") * [complete()](/documentation/timer/timer-methods/complete "complete()") * [cancel()](/documentation/timer/timer-methods/cancel "cancel()") * [revert()](/documentation/timer/timer-methods/revert "revert()") * [seek()](/documentation/timer/timer-methods/seek "seek()") * [stretch()](/documentation/timer/timer-methods/stretch "stretch()") **Previous** **Next** * [Timer callbacks](/documentation/timer/timer-callbacks "Timer callbacks") * [play()](/documentation/timer/timer-methods/play "play()") --- # play() | Anime.js | JavaScript Animation Engine play() Search [Timer](/documentation/timer "Timer")  [Methods](/documentation/timer/timer-methods "Timer methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [play()](/documentation/timer/timer-methods/play "play()") =========================================================== Forces the timer to play forward. Returns ------- The timer itself Can be chained with other timer methods. import { createTimer, utils } from 'animejs'; const [ $playButton ] = utils.$('.play'); const [ $time ] = utils.$('.time'); const timer = createTimer({ duration: 2000, autoplay: false, onUpdate: self => $time.innerHTML = self.iterationCurrentTime, }); const playTimer = () => timer.play(); $playButton.addEventListener('click', playTimer); 
          iteration time
          0
**Previous** **Next** * [Timer methods](/documentation/timer/timer-methods "Timer methods") * [reverse()](/documentation/timer/timer-methods/reverse "reverse()") --- # reverse() | Anime.js | JavaScript Animation Engine reverse() Search [Timer](/documentation/timer "Timer")  [Methods](/documentation/timer/timer-methods "Timer methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [reverse() V4](/documentation/timer/timer-methods/reverse "reverse()") ======================================================================= Forces the timer to play backward. Returns ------- The timer itself Can be chained with other timer methods. import { createTimer, utils } from 'animejs'; const [ $reverseButton ] = utils.$('.reverse'); const [ $time ] = utils.$('.time'); const timer = createTimer({ duration: 2000, onUpdate: self => $time.innerHTML = self.iterationCurrentTime, }); const reverseTimer = () => timer.reverse(); $reverseButton.addEventListener('click', reverseTimer); 
          iteration time
          0
**Previous** **Next** * [play()](/documentation/timer/timer-methods/play "play()") * [pause()](/documentation/timer/timer-methods/pause "pause()") --- # pause() | Anime.js | JavaScript Animation Engine pause() Search [Timer](/documentation/timer "Timer")  [Methods](/documentation/timer/timer-methods "Timer methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [pause()](/documentation/timer/timer-methods/pause "pause()") ============================================================== Pauses a running timer. Returns ------- The timer itself Can be chained with other timer methods. import { createTimer, utils } from 'animejs'; const [ $pauseButton ] = utils.$('.pause'); const [ $time ] = utils.$('.time'); const timer = createTimer({ onUpdate: self => $time.innerHTML = self.currentTime }); const pauseTimer = () => timer.pause(); $pauseButton.addEventListener('click', pauseTimer); 
          current time
          0
**Previous** **Next** * [reverse()](/documentation/timer/timer-methods/reverse "reverse()") * [restart()](/documentation/timer/timer-methods/restart "restart()") --- # then() | Anime.js | JavaScript Animation Engine then() Search [Timer](/documentation/timer "Timer")  [Callbacks](/documentation/timer/timer-callbacks "Timer callbacks") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [then()](/documentation/timer/timer-callbacks/then "then()") ============================================================= Returns a `Promise` that resolves and execute a callback when the timer completes. The `then()` method can be directly inlined like this: createTimer({duration: 500}).then(callback); Or used in an `async` / `await` context: async function waitForTimerToComplete() { return createTimer({ duration: 250 }) } const asyncTimer = await waitForTimerToComplete(); Parameters ---------- | Name | Type | | --- | --- | | callback | A `Function` whose first argument returns the timer itself | Returns ------- `Promise` import { createTimer, utils } from 'animejs'; const [ $status ] = utils.$('.status'); const [ $time ] = utils.$('.time'); createTimer({ duration: 2000, onUpdate: self => $time.innerHTML = self.currentTime, }) .then(() => $status.innerHTML = 'fulfilled'); 
          promise status
          pending
        
          current time
          0
**Previous** **Next** * [onPause](/documentation/timer/timer-callbacks/onpause "onPause") * [Timer methods](/documentation/timer/timer-methods "Timer methods") --- # restart() | Anime.js | JavaScript Animation Engine restart() Search [Timer](/documentation/timer "Timer")  [Methods](/documentation/timer/timer-methods "Timer methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [restart()](/documentation/timer/timer-methods/restart "restart()") ==================================================================== Resets all properties and set the `currentTime` of a timer to `0`. If the [`autoplay`](/documentation/timer/timer-playback-settings/autoplay "autoplay") is set to `true`, the timer plays automatically. Returns ------- The timer itself Can be chained with other timer methods. import { createTimer, utils } from 'animejs'; const [ $restartButton ] = utils.$('.restart'); const [ $time ] = utils.$('.time'); const timer = createTimer({ onUpdate: self => $time.innerHTML = self.currentTime }); const restartTimer = () => timer.restart(); $restartButton.addEventListener('click', restartTimer); 
          current time
          0
**Previous** **Next** * [pause()](/documentation/timer/timer-methods/pause "pause()") * [alternate()](/documentation/timer/timer-methods/alternate "alternate()") --- # resume() | Anime.js | JavaScript Animation Engine resume() Search [Timer](/documentation/timer "Timer")  [Methods](/documentation/timer/timer-methods "Timer methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [resume()](/documentation/timer/timer-methods/resume "resume()") ================================================================= Resumes the playback of a paused timer in its current direction. Returns ------- The timer itself Can be chained with other timer methods. import { createTimer, utils } from 'animejs'; const [ $resumeButton, $pauseButton, $alternateButton ] = utils.$('.button'); const [ $time ] = utils.$('.time'); const timer = createTimer({ duration: 2000, onUpdate: self => $time.innerHTML = self.iterationCurrentTime, loop: true, }); const resumeTimer = () => timer.resume(); const pauseTimer = () => timer.pause(); const alternateTimer = () => timer.alternate(); $resumeButton.addEventListener('click', resumeTimer); $pauseButton.addEventListener('click', pauseTimer); $alternateButton.addEventListener('click', alternateTimer); 
          iteration time
          0
**Previous** **Next** * [alternate()](/documentation/timer/timer-methods/alternate "alternate()") * [complete()](/documentation/timer/timer-methods/complete "complete()") --- # alternate() | Anime.js | JavaScript Animation Engine alternate() Search [Timer](/documentation/timer "Timer")  [Methods](/documentation/timer/timer-methods "Timer methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [alternate()](/documentation/timer/timer-methods/alternate "alternate()") ========================================================================== Toggles the playback direction while adjusting the `currentTime` position to reflect the new time progress. Only the `iterationTime` is actually played in reverse since the `currentTime` always starts at `0` and ends at `duration`. Returns ------- The timer itself Can be chained with other timer methods. import { createTimer, utils } from 'animejs'; const [ $alternateButton ] = utils.$('.button'); const [ $iterationTime ] = utils.$('.iteration-time'); const timer = createTimer({ duration: 10000, loop: true, onUpdate: self => { $iterationTime.innerHTML = self.iterationCurrentTime; } }); const alternateTimer = () => timer.alternate(); $alternateButton.addEventListener('click', alternateTimer); 
          iteration time
          0
**Previous** **Next** * [restart()](/documentation/timer/timer-methods/restart "restart()") * [resume()](/documentation/timer/timer-methods/resume "resume()") --- # cancel() | Anime.js | JavaScript Animation Engine cancel() Search [Timer](/documentation/timer "Timer")  [Methods](/documentation/timer/timer-methods "Timer methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [cancel()](/documentation/timer/timer-methods/cancel "cancel()") ================================================================= Pauses the timer, removes it from the engine's main loop, and frees up memory. Returns ------- The timer itself Can be chained with other timer methods. import { createTimer, utils } from 'animejs'; const [ $playButton ] = utils.$('.play'); const [ $cancelButton ] = utils.$('.cancel'); const [ $time ] = utils.$('.time'); const timer = createTimer({ onUpdate: self => $time.innerHTML = self.currentTime }); const playTimer = () => timer.play(); const cancelTimer = () => timer.cancel(); $playButton.addEventListener('click', playTimer); $cancelButton.addEventListener('click', cancelTimer); 
          current time
          0
**Previous** **Next** * [complete()](/documentation/timer/timer-methods/complete "complete()") * [revert()](/documentation/timer/timer-methods/revert "revert()") --- # revert() | Anime.js | JavaScript Animation Engine revert() Search [Timer](/documentation/timer "Timer")  [Methods](/documentation/timer/timer-methods "Timer methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [revert()](/documentation/timer/timer-methods/revert "revert()") ================================================================= Cancels the timer,sets its `currentTime` to `0` and reverts the linked [`onScroll()`](/documentation/scroll "Scroll") instance if necessary. Use `.revert()` when you want to completely stop and destroy an timer. Returns ------- The timer itself Can be chained with other timer methods. import { createTimer, utils } from 'animejs'; const [ $playButton ] = utils.$('.play'); const [ $revertButton ] = utils.$('.revert'); const [ $time ] = utils.$('.time'); const timer = createTimer({ onUpdate: self => $time.innerHTML = self.currentTime }); const playTimer = () => timer.play(); const revertTimer = () => { timer.revert(); $time.innerHTML = timer.currentTime } $playButton.addEventListener('click', playTimer); $revertButton.addEventListener('click', revertTimer); 
          current time
          0
**Previous** **Next** * [cancel()](/documentation/timer/timer-methods/cancel "cancel()") * [seek()](/documentation/timer/timer-methods/seek "seek()") --- # complete() | Anime.js | JavaScript Animation Engine complete() Search [Timer](/documentation/timer "Timer")  [Methods](/documentation/timer/timer-methods "Timer methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [complete()](/documentation/timer/timer-methods/complete "complete()") ======================================================================= Completes a timer instantly. Returns ------- The timer itself Can be chained with other timer methods. import { createTimer, utils } from 'animejs'; const [ $completeButton ] = utils.$('.complete'); const [ $time ] = utils.$('.time'); const timer = createTimer({ duration: 100000, onUpdate: self => $time.innerHTML = self.currentTime }); const completeTimer = () => timer.complete(); $completeButton.addEventListener('click', completeTimer); 
          current time
          0
**Previous** **Next** * [resume()](/documentation/timer/timer-methods/resume "resume()") * [cancel()](/documentation/timer/timer-methods/cancel "cancel()") --- # stretch() | Anime.js | JavaScript Animation Engine stretch() Search [Timer](/documentation/timer "Timer")  [Methods](/documentation/timer/timer-methods "Timer methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [stretch()](/documentation/timer/timer-methods/stretch "stretch()") ==================================================================== Changes the total duration of a timer to fit a specific time. The total duration is equal to the duration of an iteration multiplied with the total number of iterations. So if a timer has a duration of 1000ms and loops twice (3 iterations in total), the total duration is 3000ms (1000 \* 3). timer.stretch(duration); Parameters ---------- | Name | Type | Description | | --- | --- | --- | | duration | `Number` | The new total duration in ms of the timer | Returns ------- The timer itself Can be chained with other timer methods. import { animate, utils } from 'animejs'; const [ $range ] = utils.$('.range'); const [ $duration ] = utils.$('.duration'); const [ $time ] = utils.$('.time'); const timer = createTimer({ duration: 2000, onUpdate: self => $time.innerHTML = self.currentTime }); const stretchTimer = () => { timer.stretch(+$range.value); $duration.innerHTML = utils.round(timer.duration, 0); timer.restart(); } $range.addEventListener('input', stretchTimer); 
          duration
          2000
        
          current time
          0
**Previous** **Next** * [seek()](/documentation/timer/timer-methods/seek "seek()") * [Timer properties](/documentation/timer/timer-properties "Timer properties") --- # seek() | Anime.js | JavaScript Animation Engine seek() Search [Timer](/documentation/timer "Timer")  [Methods](/documentation/timer/timer-methods "Timer methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [seek()](/documentation/timer/timer-methods/seek "seek()") =========================================================== Updates the `currentTime` of the timer and advances it to a specific time. timer.seek(time, muteCallbacks); Parameters ---------- | Name | Type | Description | | --- | --- | --- | | time | `Number` | The new `currentTime` in ms of the timer | | muteCallbacks=false (opt) | `Boolean` | If `true`, prevent the callbacks from being fired | Returns ------- The timer itself Can be chained with other timer methods. import { createTimer, utils } from 'animejs'; const [ $range ] = utils.$('.range'); const [ $playPauseButton ] = utils.$('.play-pause'); const [ $time ] = utils.$('.time'); const updateButtonLabel = timer => { $playPauseButton.textContent = timer.paused ? 'Play' : 'Pause'; } const timer = createTimer({ duration: 2000, autoplay: false, onUpdate: self => { $range.value = self.currentTime; $time.innerHTML = self.currentTime; updateButtonLabel(self); }, onComplete: updateButtonLabel, }); const seekTimer = () => timer.seek(+$range.value); const playPauseTimer = () => { if (timer.paused) { timer.play(); } else { timer.pause(); updateButtonLabel(timer); } } $range.addEventListener('input', seekTimer); $playPauseButton.addEventListener('click', playPauseTimer); 
          current time
          0
**Previous** **Next** * [revert()](/documentation/timer/timer-methods/revert "revert()") * [stretch()](/documentation/timer/timer-methods/stretch "stretch()") --- # Timer properties | Anime.js | JavaScript Animation Engine Timer properties Search [Timer](/documentation/timer "Timer") [Timer properties](/documentation/timer/timer-properties "Timer properties") ============================================================================= const timer = createTimer(parameters); ┌────────────┐ timer.│progress │ timer.│currentTime ├─ Properties timer.│duration │ └────────────┘ | Name | Description | | --- | --- | | id | Gets and sets the ID of the timer (`String` \| `Number`) | | deltaTime | Gets the time in ms elapsed between the current and previous frame (`Number`) | | currentTime | Gets and sets the global current time in ms of the timer (`Number`) | | iterationCurrentTime | Gets and sets the current iteration time in ms (`Number`) | | progress | Gets and sets the overall progress of the timer from `0` to `1` (`Number`) | | iterationProgress | Gets and sets the progress of the current iteration from `0` to `1` (`Number`) | | currentIteration | Gets and sets the current iteration count (`Number`). | | speed | Gets and sets the playbackRate multiplier of the timer (`Number`) | | fps | Gets and sets the frameRate of the timer (`Number`) | | paused | Gets and sets whether the timer is paused (`Boolean`) | | began | Gets and sets whether the timer has started (`Boolean`) | | completed | Gets and sets whether the timer has completed (`Boolean`) | | reversed | Gets and sets whether the timer is reversed (`Boolean`) | **Previous** **Next** * [Timer methods](/documentation/timer/timer-methods "Timer methods") * [Animation](/documentation/animation "Animation") --- # CSS Selector | Anime.js | JavaScript Animation Engine CSS Selector Search [Animation](/documentation/animation "Animation")  [Targets](/documentation/animation/targets "Targets") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [CSS Selector](/documentation/animation/targets/css-selector "CSS Selector") ============================================================================= Targets one or multiple DOM Elements using a CSS selector. Accepts ------- Any `String` accepted by `document.querySelectorAll()` import { animate } from 'animejs'; animate('.square', { x: '17rem' }); animate('#css-selector-id', { rotate: '1turn' }); animate('.row:nth-child(3) .square', { scale: [1, .5, 1] });
**Previous** **Next** * [Targets](/documentation/animation/targets "Targets") * [DOM Elements](/documentation/animation/targets/dom-elements "DOM Elements") --- # Animation | Anime.js | JavaScript Animation Engine Animation Search [Animation](/documentation/animation "Animation") ================================================== Animates the properties values of targeted elements, with a wide range of parameters, callbacks and methods. ------------------------------------------------------------------------------------------------------------ Animations are created using the `animate()` method. import { animate } from 'animejs'; const animation = animate(targets, parameters); Parameters ---------- | Name | Accepts | | --- | --- | | targets | [Targets](/documentation/animation/targets "Targets") | | parameters | An `Object` of [Animatable properties](/documentation/animation/animatable-properties "Animatable properties")
, [Tween parameters](/documentation/animation/tween-parameters "Tween parameters")
, [Playback settings](/documentation/animation/animation-playback-settings "Animation playback settings")
and [Animation callbacks](/documentation/animation/animation-callbacks "Animation callbacks") | Returns ------- JSAnimation WAAPI powered animations ------------------------ Anime.js provides a more lightweight (3KB) version of the `animate()` method (10KB) powered by the [Web Animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) . import { waapi } from 'animejs'; const animation = waapi.animate(targets, parameters); The WAAPI version has less features overall, but covers most of the basic API. Features only available in the JavaScript version are indicated with a (JS) badge and WAAPI specific features are indicated with a (WAAPI) badge To know more about when to use the WAAPI version and its potential pitfalls, please refer to the [Web Animations API Guide](/documentation/web-animation-api "Web Animations API Guide") . import { animate } from 'animejs'; animate('span', { // Property keyframes y: [\ { to: '-2.75rem', ease: 'outExpo', duration: 600 },\ { to: 0, ease: 'outBounce', duration: 800, delay: 100 }\ ], // Property specific parameters rotate: { from: '-1turn', delay: 0 }, delay: (_, i) => i * 50, // Function based value ease: 'inOutCirc', loopDelay: 1000, loop: true });

H E L L O   W O R L D

**In this section** * [Targets](/documentation/animation/targets "Targets") * [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") * [Tween value types](/documentation/animation/tween-value-types "Tween value types") * [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") * [Keyframes](/documentation/animation/keyframes "Keyframes") * [Playback settings](/documentation/animation/animation-playback-settings "Animation playback settings") * [Callbacks](/documentation/animation/animation-callbacks "Animation callbacks") * [Methods](/documentation/animation/animation-methods "Animation methods") * [Properties](/documentation/animation/animation-properties "Animation properties") **Previous** **Next** * [Timer](/documentation/timer "Timer") * [Targets](/documentation/animation/targets "Targets") --- # DOM Elements | Anime.js | JavaScript Animation Engine DOM Elements Search [Animation](/documentation/animation "Animation")  [Targets](/documentation/animation/targets "Targets") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [DOM Elements](/documentation/animation/targets/dom-elements "DOM Elements") ============================================================================= Targets one or multiple DOM Elements. Accepts ------- * `HTMLElement` * `SVGElement` * `SVGGeometryElement` * `NodeList` import { animate } from 'animejs'; const $demo = document.querySelector('#selector-demo'); const $squares = $demo.querySelectorAll('.square'); animate($demo, { scale: .75 }); animate($squares, { x: '23rem' });
**Previous** **Next** * [CSS Selector](/documentation/animation/targets/css-selector "CSS Selector") * [JavaScript Objects](/documentation/animation/targets/javascript-objects "JavaScript Objects") --- # Targets | Anime.js | JavaScript Animation Engine Targets Search [Animation](/documentation/animation "Animation") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [Targets](/documentation/animation/targets "Targets") ====================================================== Specify the elements to which property value changes are applied. Animation targets are defined in the first argument of the `animate()` function. animate( ┌────────────┐ │ '.square', ├─ Targets └────────────┘ { translateX: 100, scale: 2, opacity: .5, duration: 400, delay: 250, ease: 'out(3)', loop: 3, alternate: true, autoplay: false, onBegin: () => {}, onLoop: () => {}, onUpdate: () => {}, }); **In this section** * [CSS Selector](/documentation/animation/targets/css-selector "CSS Selector") * [DOM Elements](/documentation/animation/targets/dom-elements "DOM Elements") * [JavaScript Objects](/documentation/animation/targets/javascript-objects "JavaScript Objects") * [Array of targets](/documentation/animation/targets/array-of-targets "Array of targets") **Previous** **Next** * [Animation](/documentation/animation "Animation") * [CSS Selector](/documentation/animation/targets/css-selector "CSS Selector") --- # JavaScript Objects | Anime.js | JavaScript Animation Engine JavaScript Objects Search [Animation](/documentation/animation "Animation")  [Targets](/documentation/animation/targets "Targets") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [JavaScript Objects JS](/documentation/animation/targets/javascript-objects "JavaScript Objects") ================================================================================================== Targets one or multiple JavaScript `Object`. Accepts ------- * `Object` * Instance of `Class` import { animate, utils } from 'animejs'; const [ $log ] = utils.$('code'); const vector2D = { x: 0, y: 0 }; animate(vector2D, { x: 100, y: 150, modifier: utils.round(0), onUpdate: () => $log.textContent = JSON.stringify(vector2D), }); 
      {"x":0,"y":0}
**Previous** **Next** * [DOM Elements](/documentation/animation/targets/dom-elements "DOM Elements") * [Array of targets](/documentation/animation/targets/array-of-targets "Array of targets") --- # Array of targets | Anime.js | JavaScript Animation Engine Array of targets Search [Animation](/documentation/animation "Animation")  [Targets](/documentation/animation/targets "Targets") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [Array of targets](/documentation/animation/targets/array-of-targets "Array of targets") ========================================================================================= Targets multiple valid [Targets](/documentation/animation/targets "Targets") simultaneously by grouping them inside an `Array`. Any types of targets can be grouped together Accepts ------- An `Array` of [Targets](/documentation/animation/targets "Targets") import { animate, utils } from 'animejs'; const [ $log ] = utils.$('.demo code'); const vector2D = { x: 0, y: 0 }; animate([vector2D, '.square'], { x: '17rem', modifier: utils.roundPad(2).padStart(5, '0'), onRender: () => $log.textContent = JSON.stringify(vector2D), }); 
      {"x":"0"}
**Previous** **Next** * [JavaScript Objects](/documentation/animation/targets/javascript-objects "JavaScript Objects") * [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") --- # CSS Properties | Anime.js | JavaScript Animation Engine CSS Properties Search [Animation](/documentation/animation "Animation")  [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [CSS Properties](/documentation/animation/animatable-properties/css-properties "CSS Properties") ================================================================================================= Any CSS numerical and color properties can be animated. Properties containing a dash in their name, like `background-color`, must be converted to camel case (`backgroundColor`), or written as a `String` (`'background-color'`). Most CSS properties can cause layout changes or repaint leading to choppy animations. To achieve smoother animations, always prioritise opacity and [CSS transforms](/documentation/animation/animatable-properties/css-transforms "CSS transforms") as much as possible. import { animate } from 'animejs'; animate('.square', { left: 'calc(7.75rem * 2)', borderRadius: 64, 'background-color': '#F9F640', filter: 'blur(5px)', });
**Previous** **Next** * [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") * [CSS transforms](/documentation/animation/animatable-properties/css-transforms "CSS transforms") --- # Animatable properties | Anime.js | JavaScript Animation Engine Animatable properties Search [Animation](/documentation/animation "Animation") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") ================================================================================================ Define which properties of the [Targets](/documentation/animation/targets "Targets") can be animated. Animatable properties are defined in the parameters `Object` of the `animate()` function. animate('.square', { ┌──────────────────┐ │ translateX: 100, │ │ scale: 2, ├─ Animatable Properties │ opacity: .5, │ └──────────────────┘ duration: 400, delay: 250, ease: 'out(3)', loop: 3, alternate: true, autoplay: false, onBegin: () => {}, onLoop: () => {}, onUpdate: () => {}, }); **In this section** * [CSS Properties](/documentation/animation/animatable-properties/css-properties "CSS Properties") * [CSS transforms](/documentation/animation/animatable-properties/css-transforms "CSS transforms") * [CSS Variables](/documentation/animation/animatable-properties/css-variables "CSS Variables") * [JS Object properties](/documentation/animation/animatable-properties/javascript-object-properties "JavaScript Object properties") * [HTML Attributes](/documentation/animation/animatable-properties/html-attributes "HTML Attributes") * [SVG Attributes](/documentation/animation/animatable-properties/svg-attributes "SVG Attributes") **Previous** **Next** * [Targets](/documentation/animation/targets "Targets") * [CSS Properties](/documentation/animation/animatable-properties/css-properties "CSS Properties") --- # CSS Variables | Anime.js | JavaScript Animation Engine CSS Variables Search [Animation](/documentation/animation "Animation")  [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [CSS Variables V4 JS](/documentation/animation/animatable-properties/css-variables "CSS Variables") ==================================================================================================== CSS variables with numerical or color values can be animated by directly passing the variable name as a string to the animation parameters. This approach also enables animation of properties defined on pseudo-elements like `::after` and `::before`, which are otherwise inaccessible via JavaScript. In order to animate CSS variables properties with the WAAPI powered `waapi.animate()` method, you need to use [`CSS.registerProperty(propertyDefinition)`](https://developer.mozilla.org/en-US/docs/Web/API/CSS/registerProperty_static "CSS.registerProperty(propertyDefinition)") , otherwise it falls back to no animations. import { animate, utils } from 'animejs'; // Set the CSS variables as properties on the animated elements utils.set('.square', { '--radius': '4px', '--x': '0rem', '--pseudo-el-after-scale': '1', // applied to the pseudo element "::after" borderRadius: 'var(--radius)', translateX: 'var(--x)', }); // Animate the values of the CSS variables animate('.square', { '--radius': '20px', '--x': '16.5rem', '--pseudo-el-after-scale': '1.55' // Animates the ":after" pseudo element of the element });
**Previous** **Next** * [CSS transforms](/documentation/animation/animatable-properties/css-transforms "CSS transforms") * [JavaScript Object properties](/documentation/animation/animatable-properties/javascript-object-properties "JavaScript Object properties") --- # JavaScript Object properties | Anime.js | JavaScript Animation Engine JavaScript Object properties Search [Animation](/documentation/animation "Animation")  [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [JavaScript Object properties JS](/documentation/animation/animatable-properties/javascript-object-properties "JavaScript Object properties") ============================================================================================================================================== Numerical and color JavaScript `Object` properties can be passed directly to the animation parameters. import { animate, utils } from 'animejs'; const myObject = { number: 1337, unit: '42%', } const [ $log ] = utils.$('code'); animate(myObject, { number: 50, unit: '100%', modifier: utils.round(0), onRender: function() { $log.innerHTML = JSON.stringify(myObject); } }); 
      {"number":1337,"unit":"42%"}
**Previous** **Next** * [CSS Variables](/documentation/animation/animatable-properties/css-variables "CSS Variables") * [HTML Attributes](/documentation/animation/animatable-properties/html-attributes "HTML Attributes") --- # CSS transforms | Anime.js | JavaScript Animation Engine CSS transforms Search [Animation](/documentation/animation "Animation")  [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [CSS transforms](/documentation/animation/animatable-properties/css-transforms "CSS transforms") ================================================================================================= The CSS `transform` property can be animated by specifying individual properties directly in the parameter object with both JS and WAAPI `animate()` versions. This allows a greater level of control over how to animate individual transform properties, giving you more flexibility than CSS animations or native WAAPI. The JS `animate()` method doesn't parse transforms declared from a CSS style declaration and transforms properties must be set directly in the inline styles of the element. You can use the built-in [`utils.set()`](/documentation/utilities/set "utils.set()") function to independently set your transform values before animating an element and define in which order they must be set. In order to animate the `transform` property directly, it's recommended to use the WAAPI powered `waapi.animate()` method. Individual transforms with WAAPI only works for browsers that support [`CSS.registerProperty(propertyDefinition)`](https://developer.mozilla.org/en-US/docs/Web/API/CSS/registerProperty_static "CSS.registerProperty(propertyDefinition)") , and fallback to no animations. Valid individual CSS transforms properties ------------------------------------------ | Name | Shorthand | Default Value | Default Unit | | --- | --- | --- | --- | | translateX | x | `'0px'` | `'px'` | | translateY | y | `'0px'` | `'px'` | | translateZ | z | `'0px'` | `'px'` | | rotate | — | `'0deg'` | `'deg'` | | rotateX | — | `'0deg'` | `'deg'` | | rotateY | — | `'0deg'` | `'deg'` | | rotateZ | — | `'0deg'` | `'deg'` | | scale | — | `'1'` | — | | scaleX | — | `'1'` | — | | scaleY | — | `'1'` | — | | scaleZ | — | `'1'` | — | | skew | — | `'0deg'` | `'deg'` | | skewX | — | `'0deg'` | `'deg'` | | skewY | — | `'0deg'` | `'deg'` | | perspective | — | `'0px'` | `'px'` | import { animate, waapi } from 'animejs'; animate('.square', { x: '15rem', // TranslateX shorthand scale: 1.25, skew: -45, rotate: '1turn', }); // the WAAPI version is recommanded if you want to animate the transform property directly waapi.animate('.square', { transform: 'translateX(15rem) scale(1.25) skew(-45deg) rotate(1turn)', });
JS / WAAPI
WAAPI
**Previous** **Next** * [CSS Properties](/documentation/animation/animatable-properties/css-properties "CSS Properties") * [CSS Variables](/documentation/animation/animatable-properties/css-variables "CSS Variables") --- # HTML Attributes | Anime.js | JavaScript Animation Engine HTML Attributes Search [Animation](/documentation/animation "Animation")  [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [HTML Attributes JS](/documentation/animation/animatable-properties/html-attributes "HTML Attributes") ======================================================================================================= Numerical and color HTML attributes can be passed directly to the animation parameters. import { animate, utils } from 'animejs'; animate('input', { value: 1000, // animate the input "value" attribute alternate: true, loop: true, modifier: utils.round(0), });
**Previous** **Next** * [JavaScript Object properties](/documentation/animation/animatable-properties/javascript-object-properties "JavaScript Object properties") * [SVG Attributes](/documentation/animation/animatable-properties/svg-attributes "SVG Attributes") --- # Unit conversion value | Anime.js | JavaScript Animation Engine Unit conversion value Search [Animation](/documentation/animation "Animation")  [Tween value types](/documentation/animation/tween-value-types "Tween value types") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) [Unit conversion value](/documentation/animation/tween-value-types/unit-conversion-value "Unit conversion value") ================================================================================================================== Converts and animates to a value with a different unit than the default or currently used one. When using the JS `animate()` method, unit conversions may sometimes produce unexpected results depending on the unit type and animated properties used. For more predictable results, it's recommended to define the unit outside of the animation using [`utils.set()`](/documentation/utilities/set "utils.set()") , and then animate to the current unit. Or simply use the WAAPI `animate()` method. Accepts ------- `String` import { animate, utils } from 'animejs'; animate('.square', { width: '25%', // from '48px' to '25%', x: '15rem', // from '0px' to '15rem', rotate: '.75turn', // from `0deg` to '.75turn', });
**Previous** **Next** * [Numerical value](/documentation/animation/tween-value-types/numerical-value "Numerical value") * [Relative value](/documentation/animation/tween-value-types/relative-value "Relative value") --- # Tween value types | Anime.js | JavaScript Animation Engine Tween value types Search [Animation](/documentation/animation "Animation") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [Tween value types](/documentation/animation/tween-value-types "Tween value types") ==================================================================================== Specify the _start_ and _end_ values that define the animation of animatable properties. Animation values are assigned to [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") and accept a wide range of syntaxes. animate('.square', { x: '6rem', ─────────────────┐ y: $el => $el.dataset.y, ───┤ scale: '+=.25', ────────────┼─ Tween Values opacity: { │ from: .4, ────────────────┘ }, }); **In this section** * [Numerical](/documentation/animation/tween-value-types/numerical-value "Numerical value") * [Unit conversion](/documentation/animation/tween-value-types/unit-conversion-value "Unit conversion value") * [Relative](/documentation/animation/tween-value-types/relative-value "Relative value") * [Color](/documentation/animation/tween-value-types/color-value "Color value") * [Color function](/documentation/animation/tween-value-types/color-function-value "Color function value") * [CSS variable](/documentation/animation/tween-value-types/css-variable "CSS variable") * [Function based](/documentation/animation/tween-value-types/function-based "Function based value") **Previous** **Next** * [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") * [Numerical value](/documentation/animation/tween-value-types/numerical-value "Numerical value") --- # SVG Attributes | Anime.js | JavaScript Animation Engine SVG Attributes Search [Animation](/documentation/animation "Animation")  [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [SVG Attributes JS](/documentation/animation/animatable-properties/svg-attributes "SVG Attributes") ==================================================================================================== Numerical and color SVG attributes can be animated by passing them directly to the animation parameters. For more convenient SVG animations, check out the built-in [SVG utility methods](/documentation/svg "SVG utility methods") . import { animate } from 'animejs'; animate(['feTurbulence', 'feDisplacementMap'], { baseFrequency: .05, scale: 15, alternate: true, loop: true }); animate('polygon', { points: '64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100', alternate: true, loop: true });
**Previous** **Next** * [HTML Attributes](/documentation/animation/animatable-properties/html-attributes "HTML Attributes") * [Tween value types](/documentation/animation/tween-value-types "Tween value types") --- # Relative value | Anime.js | JavaScript Animation Engine Relative value Search [Animation](/documentation/animation "Animation")  [Tween value types](/documentation/animation/tween-value-types "Tween value types") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) [Relative value JS](/documentation/animation/tween-value-types/relative-value "Relative value") ================================================================================================ Adds, subtracts or multiplies the current target value by a specified amount. Accepts ------- | Prefix | Effect | Examples | | --- | --- | --- | | `'+='` | Add | `'+=45'` \| `'+=45px'` | | `'-='` | Subtracts | `'-=45'` \| `'-=45deg'` | | `'*='` | Multiply | `'*=.5'` | import { animate, utils } from 'animejs'; const [ $clock ] = utils.$('.clock'); const [ $add ] = utils.$('.add'); const [ $sub ] = utils.$('.sub'); const [ $mul ] = utils.$('.mul'); const add = () => animate($clock, { rotate: '+=90' }); const sub = () => animate($clock, { rotate: '-=90' }); const mul = () => animate($clock, { rotate: '*=.5' }); $add.addEventListener('click', add); $sub.addEventListener('click', sub); $mul.addEventListener('click', mul);
**Previous** **Next** * [Unit conversion value](/documentation/animation/tween-value-types/unit-conversion-value "Unit conversion value") * [Color value](/documentation/animation/tween-value-types/color-value "Color value") --- # Numerical value | Anime.js | JavaScript Animation Engine Numerical value Search [Animation](/documentation/animation "Animation")  [Tween value types](/documentation/animation/tween-value-types "Tween value types") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [Numerical value](/documentation/animation/tween-value-types/numerical-value "Numerical value") ================================================================================================ Specifies the numerical value of the animated property by passing either a `Number` or a `String` containing at least one `Number`. If no unit is specified for properties that expect a unit, like `width` for example, the resulting animation will use the default browser unit. animate(target, { width: 100 }); // Defaults to px Accepts ------- * `Number` * `String` If a specific unit is already specified, the JS `animate()` method can inherits previously defined units and the next value set without a unit on the same target property inherits the previously defined unit. animate(target, { width: '50%' }); // Uses '%' animate(target, { width: 75 }); // Inherits '%' -> '75%' The WAAPI `animate()` method only falls back automatically to `'px'` with the following properties: - x / translateX - y / translateY - z / translateZ - perspective - top - right - bottom - left - width - height - margin - padding - borderWidth - borderRadius - fontSize import { waapi } from 'animejs'; waapi.animate('.square', { x: 240, // -> 240px width: 75, // -> 75px rotate: '.75turn', });
**Previous** **Next** * [Tween value types](/documentation/animation/tween-value-types "Tween value types") * [Unit conversion value](/documentation/animation/tween-value-types/unit-conversion-value "Unit conversion value") --- # Color function value | Anime.js | JavaScript Animation Engine Color function value Search [Animation](/documentation/animation "Animation")  [Tween value types](/documentation/animation/tween-value-types "Tween value types") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [Color function value WAAPI](/documentation/animation/tween-value-types/color-function-value "Color function value") ===================================================================================================================== The CSS [`color()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color "`color()`") function can be animated with the WAAPI `animate()` method. Accepts ------- Any [valid CSS color space syntax](https://developer.mozilla.org/en-US/docs/Glossary/Color_space#named_color_spaces "CSS color space syntax") is supported import { waapi } from 'animejs'; waapi.animate('.circle', { backgroundColor: 'color(display-p3 1.0 0.267 0.267 / 1.0)', });
**Previous** **Next** * [Color value](/documentation/animation/tween-value-types/color-value "Color value") * [CSS variable](/documentation/animation/tween-value-types/css-variable "CSS variable") --- # CSS variable | Anime.js | JavaScript Animation Engine CSS variable Search [Animation](/documentation/animation "Animation")  [Tween value types](/documentation/animation/tween-value-types "Tween value types") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [CSS variable WAAPI](/documentation/animation/tween-value-types/css-variable "CSS variable") ============================================================================================= The WAAPI `animate()` method can natively animate any css variable by simply passing the variable value using the `'var(--my-value)'` syntax. Accepts ------- [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#referencing_custom_properties_with_var "CSS variable") CSS Variables can be used with the JS `animate()` method by combining a [Function based value](/documentation/animation/tween-value-types/function-based "Function based value") and [`utils.get()`](/documentation/utilities/get "utils.get()") . color: $target => utils.get($target, '--variable-name') import { waapi, animate } from 'animejs'; waapi.animate('.square', { rotate: 'var(--rotation)', borderColor: ['var(--hex-orange)', 'var(--hex-red)' ], }); // Helper for the JS animate() method const cssVar = name => $el => utils.get($el, name); animate('.square', { scale: cssVar('--scale'), background: [cssVar('--hex-red'), cssVar('--hex-orange')], });
**Previous** **Next** * [Color function value](/documentation/animation/tween-value-types/color-function-value "Color function value") * [Function based value](/documentation/animation/tween-value-types/function-based "Function based value") --- # Color value | Anime.js | JavaScript Animation Engine Color value Search [Animation](/documentation/animation "Animation")  [Tween value types](/documentation/animation/tween-value-types "Tween value types") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [Color value](/documentation/animation/tween-value-types/color-value "Color value") ==================================================================================== Color values in the following formats can be parsed and used as values for animatable color properties. Accepts ------- | Format | Syntax | | --- | --- | | HEX | `'#F44'` \| `'#FF4444'` | | HEXA | `'#F443'` \| `'#FF444433'` | | RGB | `'rgb(255, 168, 40)'` | | RGBA | `'rgba(255, 168, 40, .2)'` | | HSL | `'hsl(255, 168, 40)'` | | HSLA | `'hsla(255, 168, 40, .2)'` | | String name WAAPI | `'red'` \| `'aqua'` | import { animate } from 'animejs'; animate('.hex', { background: '#FF4B4B', }); animate('.rgb', { background: 'rgb(255, 168, 40)', }); animate('.hsl', { background: 'hsl(44, 100%, 59%)', }); animate('.hexa', { background: '#FF4B4B33', }); animate('.rgba', { background: 'rgba(255, 168, 40, .2)', }); animate('.hsla', { background: 'hsla(44, 100%, 59%, .2)', });
**Previous** **Next** * [Relative value](/documentation/animation/tween-value-types/relative-value "Relative value") * [Color function value](/documentation/animation/tween-value-types/color-function-value "Color function value") --- # Function based value | Anime.js | JavaScript Animation Engine Function based value Search [Animation](/documentation/animation "Animation")  [Tween value types](/documentation/animation/tween-value-types "Tween value types") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [Function based value](/documentation/animation/tween-value-types/function-based "Function based value") ========================================================================================================= Sets different values for each target of a multi-target animation by using a `Function` as the value. Function-based values can be re-calculated without creating a new animation using the [`animation.refresh()`](/documentation/animation/animation-methods/refresh "animation.refresh()") method. Accepts ------- A `Function` with the following parameters: animate(targets, { x: (target, index, length) => target.dataset.value * (length - index), }); Parameters ---------- | Name | Description | | --- | --- | | target | The current animated target element | | index | The index of current targeted element | | length | The total number of animated targets of the animation | Must return ----------- * [Tween value](/documentation/animation/tween-value-types "Tween value") * [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") import { animate } from 'animejs'; animate('.square', { x: $el => /** @type {HTMLElement} */($el).getAttribute('data-x'), y: (_, i) => 50 + (-50 * i), scale: (_, i, l) => (l - i) * .75, rotate: () => utils.random(-360, 360), borderRadius: () => `+=${utils.random(0, 8)}`, duration: () => utils.random(1200, 1800), delay: () => utils.random(0, 400), ease: 'outElastic(1, .5)', });
**Previous** **Next** * [CSS variable](/documentation/animation/tween-value-types/css-variable "CSS variable") * [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") --- # Tween parameters | Anime.js | JavaScript Animation Engine Tween parameters Search [Animation](/documentation/animation "Animation") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") ================================================================================= Configure values, timings, and behaviors of animated properties. Tween parameters can be specified _globally_ for all properties directly with the other animation parameters, or _locally_ for a specific property using an `Object`. All animatable properties inherit the _global_ parameters, which can be overridden _locally_ for a specific tween. animate('.square', { x: { ┌───────────────────┐ │ to: 100, │ │ delay: 0, ├─ Local Tween Parameters │ ease: 'inOut(4)'│ └───────────────────┘ }, scale: 1, opacity: .5, ┌───────────────────┐ │ duration: 400, │ │ delay: 250, ├─ Global Tween Parameters │ ease: 'out(3)', │ └───────────────────┘ loop: 3, alternate: true, }); **In this section** * [to](/documentation/animation/tween-parameters/to "to") * [from](/documentation/animation/tween-parameters/from "from") * [delay](/documentation/animation/tween-parameters/delay "delay") * [duration](/documentation/animation/tween-parameters/duration "duration") * [ease](/documentation/animation/tween-parameters/ease "ease") * [composition](/documentation/animation/tween-parameters/composition "composition") * [modifier](/documentation/animation/tween-parameters/modifier "modifier") **Previous** **Next** * [Tween value types](/documentation/animation/tween-value-types "Tween value types") * [to](/documentation/animation/tween-parameters/to "to") --- # to | Anime.js | JavaScript Animation Engine to Search [Animation](/documentation/animation "Animation")  [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [to](/documentation/animation/tween-parameters/to "to") ======================================================== Animates _to_ a specified value from the current target value. Must be defined inside a local tween parameter `Object`. Required -------- Only if no [from](/documentation/animation/tween-parameters/from "from") property is defined Accepts ------- * Any valid [Tween value types](/documentation/animation/tween-value-types "Tween value types") * An `Array` of two [Tween value keyframes](/documentation/animation/keyframes/tween-values-keyframes "Tween value keyframes") (`[fromValue, toValue]`) Default ------- The current target value is used if only a [from](/documentation/animation/tween-parameters/from "from") property is defined import { animate } from 'animejs'; animate('.square', { x: { to: '16rem', // From 0px to 16rem ease: 'outCubic', }, rotate: { to: '.75turn', // From 0turn to .75turn ease: 'inOutQuad' }, });
**Previous** **Next** * [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") * [from](/documentation/animation/tween-parameters/from "from") --- # from | Anime.js | JavaScript Animation Engine from Search [Animation](/documentation/animation "Animation")  [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [from V4](/documentation/animation/tween-parameters/from "from") ================================================================= Animates _from_ a specified value to the current target value. Must be defined inside a local tween parameter `Object`. Required -------- Only if no [to](/documentation/animation/tween-parameters/to "to") property is defined Accepts ------- * Any valid [Tween value types](/documentation/animation/tween-value-types "Tween value types") Default ------- The current target value is used if only a [to](/documentation/animation/tween-parameters/to "to") property is defined import { animate } from 'animejs'; animate('.square', { opacity: { from: .5 }, // Animate from .5 opacity to 1 opacity translateX: { from: '16rem' }, // From 16rem to 0rem rotate: { from: '-.75turn', // From -.75turn to 0turn ease: 'inOutQuad', }, });
**Previous** **Next** * [to](/documentation/animation/tween-parameters/to "to") * [delay](/documentation/animation/tween-parameters/delay "delay") --- # delay | Anime.js | JavaScript Animation Engine delay Search [Animation](/documentation/animation "Animation")  [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [delay](/documentation/animation/tween-parameters/delay "delay") ================================================================= Defines the delay in milliseconds at the beginning of all animated properties, or locally to a specific property. Accepts ------- * `Number` equal to or greater than `0` * [Function based value](/documentation/animation/tween-value-types/function-based "Function based value") that returns a `Number` equal to or greater than `0` Default ------- The animation delay value (default `0`). To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.delay = 500; import { animate } from 'animejs'; const animation = animate('.square', { x: '17rem', rotate: { to: 360, delay: 1000, // Local delay applied only to rotate property }, delay: 500, // Global delay applied to all properties loop: true, alternate: true });
**Previous** **Next** * [from](/documentation/animation/tween-parameters/from "from") * [duration](/documentation/animation/tween-parameters/duration "duration") --- # duration | Anime.js | JavaScript Animation Engine duration Search [Animation](/documentation/animation "Animation")  [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [duration](/documentation/animation/tween-parameters/duration "duration") ========================================================================== Defines the duration in milliseconds of all animated properties, or of a specific property. Accepts ------- * `Number` equal to or greater than `0` * [Function based value](/documentation/animation/tween-value-types/function-based "Function based value") that returns a `Number` equal to or greater than `0` Duration values higher than `1e12` or equal to `Infinity` are clamped internally to `1e12` (approximately 32 years). Default ------- The animation duration value (default `1000`). To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.duration = 500; import { animate } from 'animejs'; const animation = animate('.square', { x: '17rem', rotate: { to: 360, duration: 1500, // Local duration only applied to rotate property }, duration: 3000, // Global duration applied to all properties loop: true, alternate: true });
**Previous** **Next** * [delay](/documentation/animation/tween-parameters/delay "delay") * [ease](/documentation/animation/tween-parameters/ease "ease") --- # composition | Anime.js | JavaScript Animation Engine composition Search [Animation](/documentation/animation "Animation")  [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [composition V4 JS](/documentation/animation/tween-parameters/composition "composition") ========================================================================================= Defines how animations behave when another animation on the same target with the same property is playing simultaneously. The composition mode can be defined globally for all animation properties or locally for a specific property. Accepts ------- | Mode | Description | | --- | --- | | `'replace'` | Replace and cancel the running animation. | | `'none'` JS | Do not replace the running animation. This means the previous animation will continue running if its duration is longer than the new animation. This mode can also offer better performance. | | `'blend'` JS | Creates an additive animation and blends its values with the running animation. | | `0` JS | Shorthand for `'replace'`. | | `1` JS | Shorthand for `'none'`. | | `2` JS | Shorthand for `'blend'`. | Default ------- `'replace'` if the animation targets count is below `1000`; otherwise, the default composition is set to `'none'` on the JS version if no composition mode is defined. To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.composition = 'blend'; Additive animations ------------------- The `'blend'` mode lets you create _additive animations_. This type of animation allows you to smoothly blend two animations of the same property on the same target together. This mode works best on properties that visually _move_ on the screen, like `'translate'`, `'scale'`, and `'rotation'`. It is not currently possible to use the additive mode when using keyframes or with color values. import { animate, utils } from 'animejs'; const squares = utils.$('.square'); const [ $none, $replace, $blend ] = squares; // Animate each square with a different composition mode squares.forEach($square => { // 'none', 'replace', 'blend' const mode = $square.classList[1]; animate($square, { scale: [.5, 1], alternate: true, loop: true, duration: 750, composition: mode, }); }); // Common animation parameters const enter = { scale: 1.5, duration: 350 }; const leave = { scale: 1.0, duration: 250 }; // Composition none animations const enterNone = () => animate($none, { composition: 'none', ...enter }); const leaveNone = () => animate($none, { composition: 'none', ...leave }); $none.addEventListener('mouseenter', enterNone); $none.addEventListener('mouseleave', leaveNone); // Composition replace animations const enterReplace = () => animate($replace, { composition: 'replace', ...enter }); const leaveReplace = () => animate($replace, { composition: 'replace', ...leave }); $replace.addEventListener('mouseenter', enterReplace); $replace.addEventListener('mouseleave', leaveReplace); // Composition blend animations const enterBlend = () => animate($blend, { composition: 'blend', ...enter }); const leaveBlend = () => animate($blend, { composition: 'blend', ...leave }); $blend.addEventListener('mouseenter', enterBlend); $blend.addEventListener('mouseleave', leaveBlend);
none
replace
blend


(Hover the squares)
**Previous** **Next** * [ease](/documentation/animation/tween-parameters/ease "ease") * [modifier](/documentation/animation/tween-parameters/modifier "modifier") --- # ease | Anime.js | JavaScript Animation Engine ease Search [Animation](/documentation/animation "Animation")  [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [ease](/documentation/animation/tween-parameters/ease "ease") ============================================================== Defines the easing function for all animated properties or a specific property. Easing functions control the rate of change of a property value over time, determining the animation's speed at different points during playback. All Anime.js built-in easing functions can either be used by passing the easing name `String` or the function accessible on the `eases` object. import { eases } from 'animejs'; const { linear, outExpo, cubicBezier } = eases; The `createSpring()` easing function must be imported separately. import { createSpring } from 'animejs'; Accepts ------- | Built-in string | Function | Parameters | | --- | --- | --- | | `'linear'`
`'linear(0, .5 75%, 1)'` | `linear()` | coords (`0, '.5 75%', 1`) | | `'irregular'` JS
`'irregular(10, 1)'` JS | `irregular()` | length = `10`, randomness = `1` | | `'steps'`
`'steps(10)'` | `steps()` | steps = `10` | | `'cubicBezier'`
`'cubicBezier(.5,0,.5,1)'` | `cubicBezier()` | x1 = `.5`, y1 = `0`, x2 = `.5`, y2 = `1` | | `'in'`
`'in(1.675)'` | `in()` | power = `1.675` | | `'out'`
`'out(1.675)'` | `out()` | power = `1.675` | | `'inOut'`
`'inOut(1.675)'` | `inOut()` | power = `1.675` | | `'inQuad'` JS | `inQuad` | \- | | `'outQuad'` JS | `outQuad` | \- | | `'inOutQuad'` JS | `inOutQuad` | \- | | `'inCubic'` JS | `inCubic` | \- | | `'outCubic'` JS | `outCubic` | \- | | `'inOutCubic'` JS | `inOutCubic` | \- | | `'inQuart'` JS | `inQuart` | \- | | `'outQuart'` JS | `outQuart` | \- | | `'inOutQuart'` JS | `inOutQuart` | \- | | `'inQuint'` JS | `inQuint` | \- | | `'outQuint'` JS | `outQuint` | \- | | `'inOutQuint'` JS | `inOutQuint` | \- | | `'inSine'` JS | `inSine` | \- | | `'outSine'` JS | `outSine` | \- | | `'inOutSine'` JS | `inOutSine` | \- | | `'inCirc'` JS | `inCirc` | \- | | `'outCirc'` JS | `outCirc` | \- | | `'inOutCirc'` JS | `inOutCirc` | \- | | `'inExpo'` JS | `inExpo` | \- | | `'outExpo'` JS | `outExpo` | \- | | `'inOutExpo'` JS | `inOutExpo` | \- | | `'inBounce'` JS | `inBounce` | \- | | `'outBounce'` JS | `outBounce` | \- | | `'inOutBounce'` JS | `inOutBounce` | \- | | `'inBack'` JS
`'inBack(1.70158) '` JS | `inBack()` | overshoot = `1.70158` | | `'outBack'` JS
`'outBack(1.70158) '` JS | `outBack()` | overshoot = `1.70158` | | `'inOutBack'` JS
`'inOutBack(1.70158) '` JS | `inOutBack()` | overshoot = `1.70158` | | `'inElastic'` JS
`'inElastic(1, .3) '` JS | `inElastic()` | amplitude = `1`, period = `.3` | | `'outElastic'` JS
`'outElastic(1, .3) '` JS | `outElastic()` | amplitude = `1`, period = `.3` | | `'inOutElastic'` JS
`'inOutElastic(1, .3) '` JS | `inOutElastic()` | amplitude = `1`, period = `.3` | | \- | `createSpring()` | `{ mass: 1, stiffness: 100, damping: 10, velocity: 0 }` | Default ------- `'out(2)'` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.ease = 'outElastic(1, .5)'; // // v3 throwback :) import { animate, waapi, eases, createSpring } from 'animejs'; animate('.row:nth-child(1) .square', { x: '17rem', rotate: 360, ease: 'inQuad', }); animate('.row:nth-child(2) .square', { x: '17rem', rotate: 360, ease: eases.outQuad, }); waapi.animate('.row:nth-child(3) .square', { x: '17rem', rotate: { to: 360, ease: 'out(6)', }, ease: createSpring({ stiffness: 70 }), });
all: 'inQuad'
all: eases.outQuad
x: createSpring()
rotate: 'inQuad'
**Previous** **Next** * [duration](/documentation/animation/tween-parameters/duration "duration") * [composition](/documentation/animation/tween-parameters/composition "composition") --- # Keyframes | Anime.js | JavaScript Animation Engine Keyframes Search [Animation](/documentation/animation "Animation") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) [Keyframes](/documentation/animation/keyframes "Keyframes") ============================================================ Create a sequence of animations on the same animatable property. Property value keyframes ------------------------ Specific to an animated property, these keyframes are passed to the property value directly: animate('.square', { ┌───────────────────┐ │ x: [0, 100, 200], ├─ Tween Values Array │ y: [0, 100, 200], │ └───────────────────┘ duration: 3000, } animate('.square', { ┌────────────────────────────┐ │ x: [{to: 100}, {to: 200}], ├─ Tween Parameters Array │ y: [{to: 100}, {to: 200}], │ └────────────────────────────┘ duration: 3000, } Animation keyframes ------------------- Defined at the animation level, these keyframes can animate multiple properties per keyframe: animate('.square', { ┌───────────────────────┐ │ keyframes: [ │\ │ { x: 100, y: 100 }, ├─ Duration Based\ │ { x: 200, y: 200 }, │\ │ ], │ └───────────────────────┘ duration: 3000, } animate('.square', { ┌───────────────────────────────┐ │ keyframes: { │ │ '0%' : { x: 0, y: 0 }, │ │ '50%' : { x: 100, y: 100 }, ├─ Percentage Based │ '100%': { x: 200, y: 200 }, │ │ }, │ └───────────────────────────────┘ duration: 3000, } **In this section** * [Tween values](/documentation/animation/keyframes/tween-values-keyframes "Tween values keyframes") * [Tween parameters](/documentation/animation/keyframes/tween-parameters-keyframes "Tween parameters keyframes") * [Duration based](/documentation/animation/keyframes/duration-based-keyframes "Duration based keyframes") * [Percentage based](/documentation/animation/keyframes/percentage-based-keyframes "Percentage based keyframes") **Previous** **Next** * [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") * [Tween values keyframes](/documentation/animation/keyframes/tween-values-keyframes "Tween values keyframes") --- # modifier | Anime.js | JavaScript Animation Engine modifier Search [Animation](/documentation/animation "Animation")  [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [modifier V4 JS](/documentation/animation/tween-parameters/modifier "modifier") ================================================================================ A `Function` that modifies or alters the behavior of the animated numerical value. Modifiers can be set globally for all animation properties or locally for a specific property. If the final animated value contains strings, like units (`'100px'`), the string part is automatically added to the final value before being applied to the element. Most [Utilities](/documentation/utilities "Utilities") functions can be used as modifiers. Accepts ------- A `Function` with the following parameters: Parameters ---------- | Name | Description | | --- | --- | | `value` | The current animated numerical value | Must returns ------------ `Number` Default ------- `null` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.modifier = v => -v; // Don't do this :D import { animate, utils } from 'animejs'; animate('.row:nth-child(1) .square', { x: '17rem', modifier: utils.round(0), // Round to 0 decimals duration: 4000, }); animate('.row:nth-child(2) .square', { x: '85rem', modifier: v => v % 17, duration: 4000, }); animate('.row:nth-child(3) .square', { x: '17rem', y: { to: '70rem', modifier: v => Math.cos(v) / 2, // Specific modifier to y property }, duration: 4000, });
utils.round(0)
v => v % 17
v => Math.cos(v) / 2
**Previous** **Next** * [composition](/documentation/animation/tween-parameters/composition "composition") * [Keyframes](/documentation/animation/keyframes "Keyframes") --- # Tween parameters keyframes | Anime.js | JavaScript Animation Engine Tween parameters keyframes Search [Animation](/documentation/animation "Animation")  [Keyframes](/documentation/animation/keyframes "Keyframes") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) [Tween parameters keyframes JS](/documentation/animation/keyframes/tween-parameters-keyframes "Tween parameters keyframes") ============================================================================================================================ Sequences multiple [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") specific to an [Animatable property](/documentation/animation/animatable-properties "Animatable properties") . This syntax allows very fine control over an animation by giving access to `ease`, `delay`, `duration` and `modifier` parameters for each individual keyframes. The default `duration` of a keyframe equals the total animation duration divided by the total number of keyframes. Accepts ------- An `Array` of [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") import { animate } from 'animejs'; animate('.square', { x: [\ { to: '17rem', duration: 700, delay: 400 },\ { to: 0, duration: 700, delay: 800 },\ ], y: [\ { to: '-2.5rem', ease: 'out', duration: 400 },\ { to: '2.5rem', duration: 800, delay: 700 },\ { to: 0, ease: 'in', duration: 400, delay: 700 },\ ], scale: [\ { to: .5, duration: 700, delay: 400 },\ { to: 1, duration: 700, delay: 800 },\ ], rotate: { to: 360, ease: 'linear' }, duration: 3000, ease: 'inOut', // ease applied between each keyframes if no ease defined playbackEase: 'ouIn(5)', // ease applied accross all keyframes loop: true, });
**Previous** **Next** * [Tween values keyframes](/documentation/animation/keyframes/tween-values-keyframes "Tween values keyframes") * [Duration based keyframes](/documentation/animation/keyframes/duration-based-keyframes "Duration based keyframes") --- # Tween values keyframes | Anime.js | JavaScript Animation Engine Tween values keyframes Search [Animation](/documentation/animation "Animation")  [Keyframes](/documentation/animation/keyframes "Keyframes") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [Tween values keyframes V4](/documentation/animation/keyframes/tween-values-keyframes "Tween values keyframes") ================================================================================================================ Sequences multiple [Tween value](/documentation/animation/tween-value-types "Tween value types") specific to an [Animatable property](/documentation/animation/animatable-properties "Animatable properties") using an `Array`. The duration between each keyframe equals the total animation duration divided by the number of transitions between each keyframes. The first keyframe defines the [from value](/documentation/animation/tween-parameters/from "from value") of the tween. You can use this syntax to quickly set the initial [from value](/documentation/animation/tween-parameters/from "from value") value of an animation: animate(target: { x: [-100, 100] }); // Animate x from -100 to 100 Accepts ------- An `Array` of valid [Tween values](/documentation/animation/tween-value-types "Tween value types") import { animate } from 'animejs'; animate('.square', { translateX: ['0rem', 0, 17, 17, 0, 0], translateY: ['0rem', -2.5, -2.5, 2.5, 2.5, 0], scale: [1, 1, .5, .5, 1, 1], rotate: { to: 360, ease: 'linear' }, duration: 3000, ease: 'inOut', // ease applied between each keyframes if no ease defined playbackEase: 'ouIn(5)', // ease applied accross all keyframes loop: true, });
**Previous** **Next** * [Keyframes](/documentation/animation/keyframes "Keyframes") * [Tween parameters keyframes](/documentation/animation/keyframes/tween-parameters-keyframes "Tween parameters keyframes") --- # Duration based keyframes | Anime.js | JavaScript Animation Engine Duration based keyframes Search [Animation](/documentation/animation "Animation")  [Keyframes](/documentation/animation/keyframes "Keyframes") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) [Duration based keyframes JS](/documentation/animation/keyframes/duration-based-keyframes "Duration based keyframes") ====================================================================================================================== Sequences multiple [Animatable property](/documentation/animation/animatable-properties "Animatable properties") one after another. This syntax allows very fine control over an animation by giving access to `ease`, `delay`, `duration` and `modifier` parameters for each individual keyframes. The default duration of a keyframe equals the total animation duration divided by the total number of keyframes. keyframes: [\ { y: 50, ease: 'out', duration: 400 },\ { x: 75, scale: .5, duration: 800 },\ ] Accepts ------- An `Array` of `Object` containing one [Animatable property](/documentation/animation/animatable-properties "Animatable properties") and [Tween parameters](/documentation/animation/tween-parameters "Tween parameters") import { animate } from 'animejs'; animate('.square', { keyframes: [\ { y: '-2.5rem', ease: 'out', duration: 400 },\ { x: '17rem', scale: .5, duration: 800 },\ { y: '2.5rem' }, // The duration here is 3000 / 5 = 600ms\ { x: 0, scale: 1, duration: 800 },\ { y: 0, ease: 'in', duration: 400 }\ ], rotate: { to: 360, ease: 'linear' }, duration: 3000, ease: 'inOut', // ease applied between each keyframes if no ease defined playbackEase: 'ouIn(5)', // ease applied accross all keyframes loop: true, });
**Previous** **Next** * [Tween parameters keyframes](/documentation/animation/keyframes/tween-parameters-keyframes "Tween parameters keyframes") * [Percentage based keyframes](/documentation/animation/keyframes/percentage-based-keyframes "Percentage based keyframes") --- # Animation playback settings | Anime.js | JavaScript Animation Engine Animation playback settings Search [Animation](/documentation/animation "Animation") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [Animation playback settings](/documentation/animation/animation-playback-settings "Animation playback settings") ================================================================================================================== Specify the timings and behaviours of an animation. Playback settings properties are defined directly in the `animate()` parameters `Object`. animate('.square', { translateX: 100, scale: 2, opacity: .5, duration: 400, delay: 250, ease: 'out(3)', ┌───────────────────┐ │ loop: 3, │ │ alternate: true, ├─ Playback Settings │ autoplay: false, │ └───────────────────┘ onBegin: () => {}, onLoop: () => {}, onUpdate: () => {}, }); **In this section** * [delay](/documentation/animation/animation-playback-settings/delay "delay") * [duration](/documentation/animation/animation-playback-settings/duration "duration") * [loop](/documentation/animation/animation-playback-settings/loop "loop") * [loopDelay](/documentation/animation/animation-playback-settings/playback-loopdelay "loopDelay") * [alternate](/documentation/animation/animation-playback-settings/alternate "alternate") * [reversed](/documentation/animation/animation-playback-settings/reversed "reversed") * [autoplay](/documentation/animation/animation-playback-settings/autoplay "autoplay") * [frameRate](/documentation/animation/animation-playback-settings/framerate "frameRate") * [playbackRate](/documentation/animation/animation-playback-settings/playbackrate "playbackRate") * [playbackEase](/documentation/animation/animation-playback-settings/playbackease "playbackEase") **Previous** **Next** * [Keyframes](/documentation/animation/keyframes "Keyframes") * [delay](/documentation/animation/animation-playback-settings/delay "delay") --- # Percentage based keyframes | Anime.js | JavaScript Animation Engine Percentage based keyframes Search [Animation](/documentation/animation "Animation")  [Keyframes](/documentation/animation/keyframes "Keyframes") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [Percentage based keyframes V4 JS](/documentation/animation/keyframes/percentage-based-keyframes "Percentage based keyframes") =============================================================================================================================== Sequences multiple [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") with positions defined from a percentage of the animation total duration. This syntax is very similar to the CSS `@keyframes` syntax and only exposes control over the [`ease`](/documentation/animation/tween-parameters/ease "ease") parameter for each individual keyframes. The first keyframe defines the [from value](/documentation/animation/tween-parameters/from "from value") of the tween. keyframes: { '25%' : { x: 100, y: 50, ease: 'out' }, '50%' : { x: 200, y: 75, }, } Accepts ------- An `Object` where * `keys` are `String` representing the percentages * `values` are an `Object` containing at least one [Animatable properties](/documentation/animation/animatable-properties "Animatable properties") and an optional [`ease`](/documentation/animation/tween-parameters/ease "ease") parameter. import { animate } from 'animejs'; animate('.square', { keyframes: { '0%' : { x: '0rem', y: '0rem', ease: 'out' }, '13%' : { x: '0rem', y: '-2.5rem', }, '37%' : { x: '17rem', y: '-2.5rem', scale: .5 }, '63%' : { x: '17rem', y: '2.5rem', scale: .5 }, '87%' : { x: '0rem', y: '2.5rem', scale: 1 }, '100%': { y: '0rem', ease: 'in' } }, rotate: { to: 360, ease: 'linear' }, duration: 3000, ease: 'inOut', // ease applied between each keyframes if no ease defined playbackEase: 'ouIn(5)', // ease applied accross all keyframes loop: true, });
**Previous** **Next** * [Duration based keyframes](/documentation/animation/keyframes/duration-based-keyframes "Duration based keyframes") * [Animation playback settings](/documentation/animation/animation-playback-settings "Animation playback settings") --- # delay | Anime.js | JavaScript Animation Engine delay Search [Animation](/documentation/animation "Animation")  [Playback settings](/documentation/animation/animation-playback-settings "Animation playback settings") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [delay](/documentation/animation/animation-playback-settings/delay "delay") ============================================================================ Defines the default delay in milliseconds of the animation tweens. Accepts ------- * A `Number` equal or greater than `0` * A [Function based value](/documentation/animation/tween-value-types/function-based "Function based value") that returns a `Number` equal to or greater than `0` Default ------- `0` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.delay = 500; import { animate } from 'animejs'; const playbackDelay = animate('.delay', { x: '16rem', scale: 1.8, delay: 500, // Global delay applied to all properties loop: true, alternate: true });
**Previous** **Next** * [Animation playback settings](/documentation/animation/animation-playback-settings "Animation playback settings") * [duration](/documentation/animation/animation-playback-settings/duration "duration") --- # loop | Anime.js | JavaScript Animation Engine loop Search [Animation](/documentation/animation "Animation")  [Playback settings](/documentation/animation/animation-playback-settings "Animation playback settings") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [loop V4](/documentation/animation/animation-playback-settings/loop "loop") ============================================================================ Defines how many times an animation repeats. Accepts ------- | Value | Effect | | --- | --- | | `Number` | The number of loops in the range `[0, Infinity]` | | `Infinity` | Loop indefinitely | | `true` | Equivalent to `Infinity` | | `-1` | Equivalent to `Infinity` | Default ------- `0` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.loop = true; import { animate } from 'animejs'; animate('.loop', { x: '17.5rem', loop: 3, }); animate('.loop-alternate', { x: '17.5rem', loop: 3, alternate: true, }); animate('.loop-reverse', { x: '17.5rem', loop: 3, reversed: true, }); animate('.loop-infinity', { x: '17.5rem', loop: true, // Or Infinity });
loop: 3
loop: 3, alternate: true
loop: 3, reversed: true
loop: true
**Previous** **Next** * [duration](/documentation/animation/animation-playback-settings/duration "duration") * [loopDelay](/documentation/animation/animation-playback-settings/playback-loopdelay "loopDelay") --- # duration | Anime.js | JavaScript Animation Engine duration Search [Animation](/documentation/animation "Animation")  [Playback settings](/documentation/animation/animation-playback-settings "Animation playback settings") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) [duration](/documentation/animation/animation-playback-settings/duration "duration") ===================================================================================== Defines the default duration in milliseconds of all animation tweens. Setting `0` to a duration completes the animation instantly upon play. Accepts ------- * A `Number` equal or greater than `0` * A [Function based value](/documentation/animation/tween-value-types/function-based "Function based value") that returns a `Number` equal to or greater than `0` Duration values higher than `1e12` are clamped internally to `1e12` (Or approximatively 32 years). Default ------- `1000` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.duration = 500; import { animate } from 'animejs'; animate('.dur-0', { x: '17rem', duration: 0, }); animate('.dur-500', { x: '17rem', duration: 500, }); animate('.dur-2000', { x: '17rem', duration: 2000 });
duration: 0
duration: 500
duration: 2000
**Previous** **Next** * [delay](/documentation/animation/animation-playback-settings/delay "delay") * [loop](/documentation/animation/animation-playback-settings/loop "loop") --- # loopDelay | Anime.js | JavaScript Animation Engine loopDelay Search [Animation](/documentation/animation "Animation")  [Playback settings](/documentation/animation/animation-playback-settings "Animation playback settings") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) [loopDelay V4 JS](/documentation/animation/animation-playback-settings/playback-loopdelay "loopDelay") ======================================================================================================= Defines the delay in milliseconds between loops. Accepts ------- A `Number` that is equal to or greater than `0` Default ------- `0` To change the default value globally, update the `engine.defaults` object. import { engine } from 'animejs'; engine.defaults.loopDelay = 500; import { animate } from 'animejs'; const loopDelayAnimation = animate('.circle', { x: '16rem', scale: { to: 1.8, delay: 500, duration: 500, }, loopDelay: 1000, loop: true, alternate: true, });
**Previous** **Next** * [loop](/documentation/animation/animation-playback-settings/loop "loop") * [alternate](/documentation/animation/animation-playback-settings/alternate "alternate") ---