# https://animejs.com/ llms-full.txt ## Anime.js Documentation Documentation Search # [Documentation](https://animejs.com/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. ### Funding goal 31% [![Jordan](https://avatars.githubusercontent.com/u/22655736?u=2acd983fcc5ad01381948275ea01979b88de4c42&v=4)Jordan](https://github.com/JordanMcn) [![Sebastian](https://avatars.githubusercontent.com/u/65504843?u=25ec043e00eaec390c1e3c3a228220caa81e7adb&v=4)Sebastian](https://github.com/iaslfw) [![Ivan Zarea](https://avatars.githubusercontent.com/u/1770364?u=428b7aa2d9460fa4a835af89abea550b9d29c454&v=4)Ivan Zarea](https://github.com/minivan) [![Rhemery](https://avatars.githubusercontent.com/u/44171696?u=f4dbe50c17bbf7c43d9dd8a650a027d06db860e6&v=4)Rhemery](https://github.com/Rhemery) [![](https://avatars.githubusercontent.com/u/4291354?u=d62b6917e998cb98640c1b6d0c102c656b2ada17&v=4)satoshionoda](https://github.com/satoshionoda) [![](https://avatars.githubusercontent.com/u/11381341?v=4)bparrillo](https://github.com/bparrillo) [![Dikshith](https://avatars.githubusercontent.com/u/60872546?u=b79ddc994408dca5820578d570eb85f7cb4fde75&v=4)Dikshith](https://github.com/dikshithvishnu) [![Richard Davey](https://avatars.githubusercontent.com/u/164476?v=4)Richard Davey](https://github.com/photonstorm) [![Mase Graye](https://avatars.githubusercontent.com/u/9310?u=179151b7c0e01aa08598bfc041508a83998c759e&v=4)Mase Graye](https://github.com/masegraye) [![Aaron Wade](https://avatars.githubusercontent.com/u/579887?v=4)Aaron Wade](https://github.com/areus) [![entrepeneur4lyf](https://avatars.githubusercontent.com/u/7050547?u=6b8363270340d09f9ad6db60c0774d947263f2dc&v=4)entrepeneur4lyf](https://github.com/entrepeneur4lyf) [![Matvey Levinson](https://avatars.githubusercontent.com/u/12140030?v=4)Matvey Levinson](https://github.com/matveyson) [![Nicolaj Andersen](https://avatars.githubusercontent.com/u/24498666?u=ff20853719d64b605ca829dbd6e5e4cdc48c342d&v=4)Nicolaj Andersen](https://github.com/nicolaj-spartan-dk) [![](https://avatars.githubusercontent.com/u/190331083?v=4)lilchocobo](https://github.com/lilchocobo) [![Artisann](https://avatars.githubusercontent.com/u/37394584?u=0a4171427e4f16d8fe0a1e57af04c43e21ab6ed0&v=4)Artisann](https://github.com/ImArtisann) [![Daniel Cruz ](https://avatars.githubusercontent.com/u/20308945?u=f38b5218c48a8c4062d317450bb404cc9b361ee6&v=4)Daniel Cruz](https://github.com/ddanielcruzz) [![Mike ](https://avatars.githubusercontent.com/u/10676303?u=b065c596da0b64b594bb27dd48b8a3306172e27e&v=4)Mike](https://github.com/mykongee) [![Scott Ashton](https://avatars.githubusercontent.com/u/2257337?u=008869cc91fee8b5d399b05f4dac10dabfc61453&v=4)Scott Ashton](https://github.com/scottmas) [![Njordr](https://avatars.githubusercontent.com/u/143640281?u=111a3cdd4945c379ddd487c2faa3bfbbbc18bc06&v=4)Njordr](https://github.com/Njordrenterprises) [![Huly® Platform™](https://avatars.githubusercontent.com/u/87086734?v=4)Huly® Platform™](https://github.com/hcengineering) [![Mr White](https://avatars.githubusercontent.com/u/42571711?u=466d2b07fe847e8ea33a17c661e733df7a1148dc&v=4)Mr White](https://github.com/Neuron-Mr-White) [![Ismail Magomedov](https://avatars.githubusercontent.com/u/20561501?u=cab322f30ebe4f4bbfc056b8af2f87b4ab68cff9&v=4)Ismail Magomedov](https://github.com/izmaelmag) [![David Lapointe Gilbert](https://avatars.githubusercontent.com/u/412352?u=aae5e2d4f1a518805529da191830c3c5fa1db5fe&v=4)David Lapointe Gilbert](https://github.com/davidwebca) [![Stefan](https://avatars.githubusercontent.com/u/5545171?u=ba1b5f5376949d6ab5a451c1587de028768904b1&v=4)Stefan](https://github.com/okydk) [![Carmen Ansio](https://avatars.githubusercontent.com/u/15913811?u=86dc9a6bd146631998a3125bfd1d1d5beca7a00d&v=4)Carmen Ansio](https://github.com/carmenansio) [![](https://avatars.githubusercontent.com/u/17936291?v=4)jamesd256](https://github.com/jamesd256) [![Kaze Wong](https://avatars.githubusercontent.com/u/8803931?u=80d386617ffed30b6afc306b8f214aab5c914c22&v=4)Kaze Wong](https://github.com/kazewong) [![Frank Frick](https://avatars.githubusercontent.com/u/5831115?u=b3a46ced3bfbbb85ec9de81c1fbcb11b8b1e4a4e&v=4)Frank Frick](https://github.com/pompidou) [![Ado Kukic](https://avatars.githubusercontent.com/u/1770570?u=b8cd738bcfedb4ea5d56d8afc9b6626cfe3e78d0&v=4)Ado Kukic](https://github.com/kukicado) [![bandit.camp](https://avatars.githubusercontent.com/u/135350596?v=4)bandit.camp](https://github.com/bandit-camp) [![Osande de Jesus](https://avatars.githubusercontent.com/u/157477355?u=15354e2298c8018624fdd8ded981ff934fc2ce40&v=4)Osande de Jesus](https://github.com/OsandeJ) [![](https://avatars.githubusercontent.com/u/4672051?v=4)talli](https://github.com/talli) [![](https://avatars.githubusercontent.com/u/1417323?u=12876f6373e65427454a3616b219e1d3f3c78a8e&v=4)EvGreen](https://github.com/EvGreen) [![](https://avatars.githubusercontent.com/u/52384531?v=4)willmcinnis](https://github.com/willmcinnis) [![Luke Jackson](https://avatars.githubusercontent.com/u/1457604?u=d9d97c4fd4fa68499276f5f578c19961ebcdac8d&v=4)Luke Jackson](https://github.com/lukejacksonn) [![Calvin Ducharme](https://avatars.githubusercontent.com/u/114726827?u=1a6e7d5663203a3b23ff0875517533cd0b00b7f2&v=4)Calvin Ducharme](https://github.com/calvinusesyourcode) [![Donovan Dikaio](https://avatars.githubusercontent.com/u/869535?u=3018bd6cf8fbee7c6f1a7f594428bb6b4cef18c4&v=4)Donovan Dikaio](https://github.com/dikaio) [![Zaid Al Kazemi](https://avatars.githubusercontent.com/u/84647728?u=0da38d40520d88563af56c87f2c0ba7fbb8080c1&v=4)Zaid Al Kazemi](https://github.com/zalkazemi) [![Daniela Aviles](https://avatars.githubusercontent.com/u/21283784?u=c7b74fc8bfcc29aabd6e895d4c2463beed40e105&v=4)Daniela Aviles](https://github.com/danielaag) [![Arjun Samir Patel](https://avatars.githubusercontent.com/u/47369740?u=40fa0c9e30f2eda57346c7edb52c4c2777b4a096&v=4)Arjun Samir Patel](https://github.com/arjunsamir) [![](https://avatars.githubusercontent.com/u/11277564?v=4)lucasskywalker](https://github.com/lucasskywalker) [![Gokul Js](https://avatars.githubusercontent.com/u/51263906?u=f51069ba1b28227e2cc837441b134bbc3c15495a&v=4)Gokul Js](https://github.com/gokuljs) [![Micky Cormier](https://avatars.githubusercontent.com/u/44218577?v=4)Micky Cormier](https://github.com/micky-cormier) [![Umut Ozan Yıldırım](https://avatars.githubusercontent.com/u/1093695?v=4)Umut Ozan Yıldırım](https://github.com/feluna) [![](https://avatars.githubusercontent.com/u/123018012?v=4)michelducker](https://github.com/michelducker) [![Joshua T.](https://avatars.githubusercontent.com/u/44368997?u=f0a0c9f923d7c1e2159d23175cfb4e0e1bb0cbf6&v=4)Joshua T.](https://github.com/radiantly) [![ash-ftdx](https://avatars.githubusercontent.com/u/188714983?u=313f285b14dde210f0dd26fcd8628d17cda7067e&v=4)ash-ftdx](https://github.com/ftdx-ash) [![](https://avatars.githubusercontent.com/u/3170225?v=4)InTheScript](https://github.com/InTheScript) [![Sam Denty](https://avatars.githubusercontent.com/u/13242392?u=1c8024be99e2142fffb6adbb2f818f702cb2ba82&v=4)Sam Denty](https://github.com/samdenty) [![RickEvry](https://avatars.githubusercontent.com/u/1908341?v=4)RickEvry](https://github.com/rickevry) Help the project via [GitHub Sponsors](https://github.com/sponsors/juliangarnier). ## Platinum sponsors [![Huly](https://animejs.com/media/pages/company-sponsors/ea90d15337-1744100039/huly-logomark.svg)Huly](https://huly.io/?ref=animejs) [![Ice Open Network](https://animejs.com/media/pages/company-sponsors/43a3cb6423-1744100039/ice-open-network-logomark.svg)Ice Open Network](https://ice.io/?ref=animejs) [![Your logo here](https://animejs.com/media/pages/company-sponsors/ba23f5c4a0-1744100039/sponsor-placeholder.svg)Your logo here](https://github.com/sponsors/juliangarnier?ref=animejs) **In this section** - [Getting started](https://animejs.com/documentation/getting-started "Getting started") - [Timer](https://animejs.com/documentation/timer "Timer") - [Animation](https://animejs.com/documentation/animation "Animation") - [Timeline](https://animejs.com/documentation/timeline "Timeline") - [Animatable](https://animejs.com/documentation/animatable "Animatable") - [Draggable](https://animejs.com/documentation/draggable "Draggable") - [ScrollObserver](https://animejs.com/documentation/scroll "ScrollObserver") - [Scope](https://animejs.com/documentation/scope "Scope") - [Stagger](https://animejs.com/documentation/stagger "Stagger") - [SVG](https://animejs.com/documentation/svg "SVG") - [Utilities](https://animejs.com/documentation/utilities "Utilities") - [WAAPI](https://animejs.com/documentation/web-animation-api "Web Animation API") - [Engine](https://animejs.com/documentation/engine "Engine") **Next** - [Getting started](https://animejs.com/documentation/getting-started "Getting started") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Create Stunning Websites ## Learnhowtocreate jaw-droppingwebsites We will re-create the entire Anime.js [landing page](https://animejs.com/) from scratch, using HTML, CSS, SVG, Canvas 2D, and WebGL (Three.js). I'll share all the animation tricks and techniques I've learned throughout the years! ### Join the wait list to get notified when the course is ready: Or if for some reason the email form doesn't work, you can email me directly at [julian@animejs.com](mailto:julian@animejs.com). Coming soon ## Animation Utility Functions Utilities Search # [Utilities](https://animejs.com/documentation/utilities "Utilities") ## A collection of utility functions for common animation tasks and for use as [Animation modifier functions](https://animejs.com/documentation/animation/tween-parameters/modifier "Animation modifier functions"). All SVG utility functions are available on the `utils` object. ```hljs javascript import { utils } from 'animejs'; ``` **In this section** - [$()](https://animejs.com/documentation/utilities/dollar-sign "$()") - [get()](https://animejs.com/documentation/utilities/get "get()") - [set()](https://animejs.com/documentation/utilities/set "set()") - [remove()](https://animejs.com/documentation/utilities/remove "remove()") - [cleanInlineStyles()](https://animejs.com/documentation/utilities/clean-inline-styles "cleanInlineStyles()") - [random()](https://animejs.com/documentation/utilities/random "random()") - [randomPick()](https://animejs.com/documentation/utilities/random-pick "randomPick()") - [shuffle()](https://animejs.com/documentation/utilities/shuffle "shuffle()") - [sync()](https://animejs.com/documentation/utilities/sync "sync()") - [lerp()](https://animejs.com/documentation/utilities/lerp "lerp()") - [round()](https://animejs.com/documentation/utilities/round "round()") - [clamp()](https://animejs.com/documentation/utilities/clamp "clamp()") - [snap()](https://animejs.com/documentation/utilities/snap "snap()") - [wrap()](https://animejs.com/documentation/utilities/wrap "wrap()") - [mapRange()](https://animejs.com/documentation/utilities/map-range "mapRange()") - [interpolate()](https://animejs.com/documentation/utilities/interpolate "interpolate()") - [roundPad()](https://animejs.com/documentation/utilities/round-pad "roundPad()") - [padStart()](https://animejs.com/documentation/utilities/pad-start "padStart()") - [padEnd()](https://animejs.com/documentation/utilities/pad-end "padEnd()") - [degToRad()](https://animejs.com/documentation/utilities/deg-to-rad "degToRad()") - [radToDeg()](https://animejs.com/documentation/utilities/rad-to-deg "radToDeg()") - [Chain-able utilities](https://animejs.com/documentation/utilities/chain-able-utility-functions "Chain-able utility functions") **Previous** **Next** - [SVG](https://animejs.com/documentation/svg "SVG") - [$()](https://animejs.com/documentation/utilities/dollar-sign "$()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Animation Guide Animation Search # [Animation](https://animejs.com/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. ```js hljs language-javascript import { animate } from 'animejs'; const animation = animate(targets, parameters); ``` ## Parameters | Name | Accepts | | --- | --- | | targets | [Targets](https://animejs.com/documentation/animation/targets "Targets") | | parameters | An `Object` of [Animatable properties](https://animejs.com/documentation/animation/animatable-properties "Animatable properties"), [Tween parameters](https://animejs.com/documentation/animation/tween-parameters "Tween parameters"), [Playback settings](https://animejs.com/documentation/animation/animation-playback-settings "Animation playback settings") and [Animation callbacks](https://animejs.com/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). ```js hljs language-javascript 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](https://animejs.com/documentation/web-animation-api "Web Animations API Guide"). ```hljs javascript 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 }); ``` ```hljs html language-xml

H E L L O   W O R L D

``` **In this section** - [Targets](https://animejs.com/documentation/animation/targets "Targets") - [Animatable properties](https://animejs.com/documentation/animation/animatable-properties "Animatable properties") - [Tween value types](https://animejs.com/documentation/animation/tween-value-types "Tween value types") - [Tween parameters](https://animejs.com/documentation/animation/tween-parameters "Tween parameters") - [Keyframes](https://animejs.com/documentation/animation/keyframes "Keyframes") - [Playback settings](https://animejs.com/documentation/animation/animation-playback-settings "Animation playback settings") - [Callbacks](https://animejs.com/documentation/animation/animation-callbacks "Animation callbacks") - [Methods](https://animejs.com/documentation/animation/animation-methods "Animation methods") - [Properties](https://animejs.com/documentation/animation/animation-properties "Animation properties") **Previous** **Next** - [Timer](https://animejs.com/documentation/timer "Timer") - [Targets](https://animejs.com/documentation/animation/targets "Targets") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Scope Scope Search # [Scope V4](https://animejs.com/documentation/scope "Scope") ## Anime.js instances declared inside a Scope can react to media queries, use custom root elements, share default parameters, and be reverted in batch, streamlining work in responsive and component-based environments. Scopes are created using the `createScope()` function. ```js hljs language-javascript import { createScope } from 'animejs'; const scope = createScope(parameters); ``` ## Parameters | Name | Accepts | | --- | --- | | parameters (opt) | [Scope parameters](https://animejs.com/documentation/scope/scope-parameters "Scope parameters") | ## Returns Scope ```hljs javascript import { animate, utils, createScope } from 'animejs'; createScope({ mediaQueries: { isSmall: '(max-width: 200px)', reduceMotion: '(prefers-reduced-motion)', } }) .add(self => { const { isSmall, reduceMotion } = self.matches; if (isSmall) { utils.set('.square', { scale: .5 }); } animate('.square', { x: isSmall ? 0 : ['-35vw', '35vw'], y: isSmall ? ['-40vh', '40vh'] : 0, loop: true, alternate: true, duration: reduceMotion ? 0 : isSmall ? 750 : 1250 }); }); ``` ```hljs html language-xml
``` **In this section** - [Add constructor function](https://animejs.com/documentation/scope/add-constructor-function "Add constructor function") - [Register method function](https://animejs.com/documentation/scope/register-method-function "Register method function") - [Parameters](https://animejs.com/documentation/scope/scope-parameters "Scope parameters") - [Methods](https://animejs.com/documentation/scope/scope-methods "Scope methods") - [Properties](https://animejs.com/documentation/scope/scope-properties "Scope properties") **Previous** **Next** - [ScrollObserver](https://animejs.com/documentation/scroll "ScrollObserver") - [Add constructor function](https://animejs.com/documentation/scope/add-constructor-function "Add constructor function") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Animation Engine Overview Engine Search # [Engine V4](https://animejs.com/documentation/engine "Engine") ## Drives and synchronises all [Animation](https://animejs.com/documentation/animation "Animation"), [Timer](https://animejs.com/documentation/timer "Timer"), and [Timeline](https://animejs.com/documentation/timeline "Timeline") instances. ```js hljs language-javascript import { engine } from 'animejs'; ``` **In this section** - [Parameters](https://animejs.com/documentation/engine/engine-parameters "Engine parameters") - [Methods](https://animejs.com/documentation/engine/engine-methods "Engine methods") - [Properties](https://animejs.com/documentation/engine/engine-properties "Engine properties") - [Engine defaults](https://animejs.com/documentation/engine/engine-defaults "Engine defaults") **Previous** **Next** - [Web Animation API](https://animejs.com/documentation/web-animation-api "Web Animation API") - [Engine parameters](https://animejs.com/documentation/engine/engine-parameters "Engine parameters") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## ScrollObserver Animation Synchronization ScrollObserver Search # [ScrollObserver V4](https://animejs.com/documentation/scroll "ScrollObserver") ## Triggers and synchronises Timer, Animation and Timeline instances on scroll ScrollObservers are created with the `onScroll()` function and can be directly declared in the [`autoplay parameter`](https://animejs.com/documentation/animation/animation-playback-settings/autoplay "autoplay parameter"). ```js hljs language-javascript import { onScroll, animate } from 'animejs'; animate(targets, { x: 100, autoplay: onScroll(parameters) }); ``` ## Parameters | Name | Accepts | | --- | --- | | parameters | An `Object` of [ScrollObserver settings](https://animejs.com/documentation/scroll/scrollobserver-settings "ScrollObserver settings"), [ScrollObserver thresholds](https://animejs.com/documentation/scroll/scrollobserver-thresholds "ScrollObserver thresholds"), [ScrollObserver sync modes](https://animejs.com/documentation/scroll/scrollobserver-synchronisation-modes "ScrollObserver sync modes") and [ScrollObserver callbacks](https://animejs.com/documentation/scroll/scrollobserver-callbacks "ScrollObserver callbacks") | ## Returns ScrollObserver ```hljs javascript import { animate, utils, onScroll } from 'animejs'; const [ container ] = utils.$('.scroll-container'); const debug = true; // Animation animate('.square', { x: '15rem', rotate: '1turn', duration: 2000, alternate: true, loop: true, autoplay: onScroll({ container, debug }) }); // Timer const [ $timer ] = utils.$('.timer'); createTimer({ duration: 2000, alternate: true, loop: true, onUpdate: self => { $timer.innerHTML = self.iterationCurrentTime }, autoplay: onScroll({ target: $timer.parentNode, container, debug }) }); // Timeline const circles = utils.$('.circle'); createTimeline({ alternate: true, loop: true, autoplay: onScroll({ target: circles[0], container, debug }) }) .add(circles[2], { x: '9rem' }) .add(circles[1], { x: '9rem' }) .add(circles[0], { x: '9rem' }); ``` ```hljs html language-xml
scroll down
          timer
          0
``` **In this section** - [Settings](https://animejs.com/documentation/scroll/scrollobserver-settings "ScrollObserver settings") - [Thresholds](https://animejs.com/documentation/scroll/scrollobserver-thresholds "ScrollObserver thresholds") - [Synchronisation modes](https://animejs.com/documentation/scroll/scrollobserver-synchronisation-modes "ScrollObserver synchronisation modes") - [Callbacks](https://animejs.com/documentation/scroll/scrollobserver-callbacks "ScrollObserver callbacks") - [Methods](https://animejs.com/documentation/scroll/scrollobserver-methods "ScrollObserver methods") - [Properties](https://animejs.com/documentation/scroll/scrollobserver-properties "scrollObserver properties") **Previous** **Next** - [Draggable](https://animejs.com/documentation/draggable "Draggable") - [ScrollObserver settings](https://animejs.com/documentation/scroll/scrollobserver-settings "ScrollObserver settings") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 578 ``` 0 enter: end 0 leave: start 0 enter: start 0 leave: end 1 enter: end 1 leave: start 1 enter: start 1 leave: end 2 enter: end 2 leave: start 2 enter: start 2 leave: end scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Stagger Animation Effects Stagger Search # [Stagger](https://animejs.com/documentation/stagger "Stagger") ## Creates sequential effects by distributing values progressively across multiple targets. Stagger [Function based values](https://animejs.com/documentation/animation/tween-value-types/function-based "Function based values") are created using `stagger()` function. ```js hljs language-javascript import { stagger } from 'animejs'; const functionValue = stagger(value, parameters); ``` ## Parameters | Name | Accepts | | --- | --- | | value | [Stagger value](https://animejs.com/documentation/stagger/stagger-value-types "Stagger value") | | parameters (opt) | [Stagger parameters](https://animejs.com/documentation/stagger/stagger-parameters "Stagger parameters") | ## Returns [Function based value](https://animejs.com/documentation/animation/tween-value-types/function-based "Function based value") ```hljs javascript import { animate, stagger } from 'animejs'; animate('.square', { x: '17rem', scale: stagger([1, .1]), delay: stagger(100), }); ``` ```hljs html language-xml
``` **In this section** - [Time staggering](https://animejs.com/documentation/stagger/time-staggering "Time staggering") - [Values staggering](https://animejs.com/documentation/stagger/values-staggering "Values staggering") - [Timeline staggering](https://animejs.com/documentation/stagger/timeline-positions-staggering "Timeline positions staggering") - [Value types](https://animejs.com/documentation/stagger/stagger-value-types "Stagger value types") - [Parameters](https://animejs.com/documentation/stagger/stagger-parameters "Stagger parameters") **Previous** **Next** - [Scope](https://animejs.com/documentation/scope "Scope") - [Time staggering](https://animejs.com/documentation/stagger/time-staggering "Time staggering") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Draggable Elements with Anime.js Draggable Search # [Draggable V4](https://animejs.com/documentation/draggable "Draggable") ## Adds draggable capabilities to DOM Elements. Draggables are created using the `createDraggable()` function. ```js hljs language-javascript import { createDraggable } from 'animejs'; const draggable = createDraggable(target, parameters); ``` ## Parameters | Name | Accepts | | --- | --- | | target | [CSS Selector](https://animejs.com/documentation/animation/targets/css-selector "CSS Selector") \| [DOM Element](https://animejs.com/documentation/animation/targets/dom-elements "DOM Element") | | parameters (opt) | An `Object` of [Draggable axes parameters](https://animejs.com/documentation/draggable/draggable-axes-parameters "Draggable axes parameters"), [Draggable settings](https://animejs.com/documentation/draggable/draggable-settings "Draggable settings") and [Draggable callbacks](https://animejs.com/documentation/draggable/draggable-callbacks "Draggable callbacks") | ## Returns Draggable ```hljs javascript import { createDraggable } from 'animejs'; createDraggable('.square'); ``` ```hljs html language-xml
``` **In this section** - [Axes parameters](https://animejs.com/documentation/draggable/draggable-axes-parameters "Draggable axes parameters") - [Settings](https://animejs.com/documentation/draggable/draggable-settings "Draggable settings") - [Callbacks](https://animejs.com/documentation/draggable/draggable-callbacks "Draggable callbacks") - [Methods](https://animejs.com/documentation/draggable/draggable-methods "Draggable methods") - [Properties](https://animejs.com/documentation/draggable/draggable-properties "Draggable properties") **Previous** **Next** - [Animatable](https://animejs.com/documentation/animatable "Animatable") - [Draggable axes parameters](https://animejs.com/documentation/draggable/draggable-axes-parameters "Draggable axes parameters") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Animatable Animation Properties Animatable Search # [Animatable V4](https://animejs.com/documentation/animatable "Animatable") ## Efficiently animates target properties, making it an ideal replacement for [`animate()`](https://animejs.com/documentation/animation "animate()") and [`utils.set()`](https://animejs.com/documentation/utilities/set "utils.set()") in situations where values change frequently, such as cursor events or animation loops. Animatables are created using the `createAnimatable()` function. ```js hljs language-javascript import { createAnimatable } from 'animejs'; const animatable = createAnimatable(targets, parameters); ``` ## Parameters | Name | Accepts | | --- | --- | | targets | [Targets](https://animejs.com/documentation/animation/targets "Targets") | | parameters | An `Object` of [Animatable settings](https://animejs.com/documentation/animatable/animatable-settings "Animatable settings") | ## Returns An Animatable instance with animatable property functions used to [get](https://animejs.com/documentation/animatable/animatable-methods/getters "get") and [set](https://animejs.com/documentation/animatable/animatable-methods/setters "set") values: ```js hljs language-javascript animatable.propertyName(value, duration, ease); // Triggers an animation animatable.propertyName(); // Returns the current value ``` For performance reasons, only `Number` or `Array` can be passed to an animatable property function. ```hljs javascript import { createAnimatable, utils } from 'animejs'; const $demos = document.querySelector('#docs-demos'); const $demo = $demos.querySelector('.docs-demo.is-active'); let bounds = $demo.getBoundingClientRect(); const refreshBounds = () => bounds = $demo.getBoundingClientRect(); const animatableSquare = createAnimatable('.square', { x: 500, // Define the x duration to be 500ms y: 500, // Define the y duration to be 500ms ease: 'out(3)', }); const onMouseMove = e => { const { width, height, left, top } = bounds; const hw = width / 2; const hh = height / 2; const x = utils.clamp(e.clientX - left - hw, -hw, hw); const y = utils.clamp(e.clientY - top - hh, -hh, hh); animatableSquare.x(x); // Animate the x value in 500ms animatableSquare.y(y); // Animate the y value in 500ms } window.addEventListener('mousemove', onMouseMove); $demos.addEventListener('scroll', refreshBounds); ``` ```hljs html language-xml
Move cursor around
``` **In this section** - [Settings](https://animejs.com/documentation/animatable/animatable-settings "Animatable settings") - [Methods](https://animejs.com/documentation/animatable/animatable-methods "Animatable methods") - [Properties](https://animejs.com/documentation/animatable/animatable-properties "Animatable properties") **Previous** **Next** - [Timeline](https://animejs.com/documentation/timeline "Timeline") - [Animatable settings](https://animejs.com/documentation/animatable/animatable-settings "Animatable settings") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Timeline Timeline Search # [Timeline](https://animejs.com/documentation/timeline "Timeline") ## Synchronises animations, timers, and functions together. Timelines are created using the `createTimeline()` function. ```js hljs language-javascript import { createTimeline } from 'animejs'; const timeline = createTimeline(parameters); ``` ## Parameters | Name | Accepts | | --- | --- | | parameters (opt) | An `Object` of [Timeline playback settings](https://animejs.com/documentation/timeline/timeline-playback-settings "Timeline playback settings") and [Timeline callbacks](https://animejs.com/documentation/timeline/timeline-callbacks "Timeline callbacks") | ## Returns A Timeline instance with various [methods](https://animejs.com/documentation/animation/animation-methods "timeline methods") used to add animations, timers, callback functions and labels to it: ```js hljs language-javascript timeline.add(target, animationParameters, position); timeline.add(timerParameters, position); timeline.sync(timelineB, position); timeline.call(callbackFunction, position); timeline.label(labelName, position); ``` ```hljs javascript import { createTimeline } from 'animejs'; const tl = createTimeline({ defaults: { duration: 750 } }); tl.label('start') .add('.square', { x: '15rem' }, 500) .add('.circle', { x: '15rem' }, 'start') .add('.triangle', { x: '15rem', rotate: '1turn' }, '<-=500'); ``` ```hljs html language-xml
``` **In this section** - [Add timers](https://animejs.com/documentation/timeline/add-timers "Add timers") - [Add animations](https://animejs.com/documentation/timeline/add-animations "Add animations") - [Sync WAAPI animations](https://animejs.com/documentation/timeline/sync-waapi-animations "Sync WAAPI animations") - [Sync timelines](https://animejs.com/documentation/timeline/sync-timelines "Sync timelines") - [Call functions](https://animejs.com/documentation/timeline/call-functions "Call functions") - [Time position](https://animejs.com/documentation/timeline/time-position "Time position") - [Playback settings](https://animejs.com/documentation/timeline/timeline-playback-settings "Timeline playback settings") - [Callbacks](https://animejs.com/documentation/timeline/timeline-callbacks "Timeline callbacks") - [Methods](https://animejs.com/documentation/timeline/timeline-methods "Timeline methods") - [Properties](https://animejs.com/documentation/timeline/timeline-properties "Timeline properties") **Previous** **Next** - [Animation](https://animejs.com/documentation/animation "Animation") - [Add timers](https://animejs.com/documentation/timeline/add-timers "Add timers") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## SVG Animation Utilities SVG Search # [SVG](https://animejs.com/documentation/svg "SVG") ## A collection of utility functions to help with SVG morphing, line drawing and motion path animations. All SVG utilities functions are available on the `svg` object. ```js hljs language-javascript import { svg } from 'animejs'; ``` **In this section** - [morphTo()](https://animejs.com/documentation/svg/morphto "morphTo()") - [createDrawable()](https://animejs.com/documentation/svg/createdrawable "createDrawable()") - [createMotionPath()](https://animejs.com/documentation/svg/createmotionpath "createMotionPath()") **Previous** **Next** - [Stagger](https://animejs.com/documentation/stagger "Stagger") - [morphTo()](https://animejs.com/documentation/svg/morphto "morphTo()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Number Wrapping Utility wrap() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [wrap() V4](https://animejs.com/documentation/utilities/wrap "wrap()") Wraps a `Number` between a range defined with _min_ and _max_ values or creates a wrapping `Function` with pre-defined _min_ and _max_ parameters. ```js hljs language-javascript const wrappedValue = utils.wrap(value, min, max); const wrapperFunction = utils.wrap(min, max); ``` ## Parameters | Name | Accepts | | --- | --- | | value (opt) | `Number` | | min | `Number` | | max | `Number` | ## Returns A `Number` if a value is provided, otherwise a [chain-able utility](https://animejs.com/documentation/utilities/chain-able-utility-functions "chain-able utility") `Function` to wrap numbers between the specified _min_ and _max_ values: ```js hljs language-javascript const wrapBetween0and100 = utils.wrap(0, 100); wrapBetween0and100(105); // 5 wrapBetween0and100(220); // 20 wrapBetween0and100(-15); // 85 const wrapAndRound = utils.wrap(0, 100).round(2); // Wrap then round to 2 decimal places wrapAndRound(105.7523); // 5.75 wrapAndRound(220.2514); // 20.25 ``` ```hljs javascript import { animate, utils } from 'animejs'; animate('.normal', { rotate: '1turn', duration: 3000, loop: true, ease: 'inOut', }); animate('.wrapped', { rotate: '1turn', modifier: utils.wrap(-.25, .25), // Used as a modifier duration: 3000, loop: true, ease: 'inOut', }); ``` ```hljs html language-xml
normal
wrapped [-.25,.25]
``` **Previous** **Next** - [snap()](https://animejs.com/documentation/utilities/snap "snap()") - [mapRange()](https://animejs.com/documentation/utilities/map-range "mapRange()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## createDrawable() function createDrawable() Search [SVG](https://animejs.com/documentation/svg "SVG") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [createDrawable()](https://animejs.com/documentation/svg/createdrawable "createDrawable()") Creates a `Proxy` of an `SVGElement` exposing an extra `draw` property that defines how much of the line is visible / drawn. ```js hljs language-javascript const [ drawable ] = svg.createDrawable(target); ``` ## Parameters | Name | Accepts | | --- | --- | | target | [CSS selector](https://animejs.com/documentation/animation/targets/css-selector "CSS selector") \| `SVGLineElement` \| `SVGPathElement` \| `SVGPolylineElement` \| `SVGPolylineElement` \| `SVGRectElement` | ## Returns An `Array` of `Proxy` `SVGElement` The added `draw` property accepts a `String` containing a `start` and `end` values separated by an empty space to define how much of the line is drawn. ```js hljs language-javascript const [ drawable ] = svg.createDrawable(target); 0 1 drawable.draw = '0 1'; |[———————————————————]| 0 .5 drawable.draw = '0 .5'; |[—————————] | .25 .75 drawable.draw = '.25 .75'; | [—————————] | .5 1 drawable.draw = '.5 1'; | [—————————]| 1 1 drawable.draw = '1 1'; | []| ``` Animating an element with the `vector-effect` attribute/styles set to `non-scaling-stroke` can be slow since the scale factor value for the path must be recalculated on every tick in order to handle changes in the size of the SVG. ```hljs javascript import { animate, svg, stagger } from 'animejs'; animate(svg.createDrawable('.line'), { draw: ['0 0', '0 1', '1 1'], ease: 'inOutQuad', duration: 2000, delay: stagger(100), loop: true }); ``` ```hljs html language-xml ``` **Previous** **Next** - [morphTo()](https://animejs.com/documentation/svg/morphto "morphTo()") - [createMotionPath()](https://animejs.com/documentation/svg/createmotionpath "createMotionPath()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Keyframe Animations Keyframes Search [Animation](https://animejs.com/documentation/animation "Animation") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) # [Keyframes](https://animejs.com/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: ```js hljs language-javascript 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: ```js hljs language-javascript 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](https://animejs.com/documentation/animation/keyframes/tween-values-keyframes "Tween values keyframes") - [Tween parameters](https://animejs.com/documentation/animation/keyframes/tween-parameters-keyframes "Tween parameters keyframes") - [Duration based](https://animejs.com/documentation/animation/keyframes/duration-based-keyframes "Duration based keyframes") - [Percentage based](https://animejs.com/documentation/animation/keyframes/percentage-based-keyframes "Percentage based keyframes") **Previous** **Next** - [Tween parameters](https://animejs.com/documentation/animation/tween-parameters "Tween parameters") - [Tween values keyframes](https://animejs.com/documentation/animation/keyframes/tween-values-keyframes "Tween values keyframes") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Value Interpolation Function interpolate() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [interpolate() V4](https://animejs.com/documentation/utilities/interpolate "interpolate()") Interpolates a value between two numbers based on a given _progress_ or creates an interpolation `Function` with pre-defined _start_ and _end_ parameters. ```js hljs language-javascript const interpolatedValue = utils.interpolate(start, end, progress); const interpolatorFunction = utils.interpolate(start, end); ``` ## Parameters | Name | Accepts | | --- | --- | | start | `Number` | | end | `Number` | | progress (opt) | `Number` ( `[0 - 1]`) | ## Returns A `Number` if a progress value is provided, otherwise a [chain-able utility](https://animejs.com/documentation/utilities/chain-able-utility-functions "chain-able utility") `Function` to interpolate between the specified _start_ and _end_ values: ```js hljs language-javascript const interpolateBetween0and100 = utils.interpolate(0, 100); interpolateBetween0and100(0.5); // 50 interpolateBetween0and100(0.75); // 75 interpolateBetween0and100(0.25); // 25 const interpolateAndRound = utils.interpolate(0, 100).round(2); // Interpolate then round to 2 decimal places interpolateAndRound(0.677523); // 67.75 interpolateAndRound(1.202514); // 100 ``` ```hljs javascript import { animate, utils } from 'animejs'; animate('.normal', { rotate: '1turn', duration: 3000, loop: true, ease: 'inOut', }); animate('.interpolated', { rotate: '1turn', modifier: utils.interpolate(0, 12), // Interpolates 0 to 12 by passing the rotate progress value 0 to 1 duration: 3000, loop: true, ease: 'inOut', }); ``` ```hljs html language-xml
normal
interpolated [0,12]
``` **Previous** **Next** - [mapRange()](https://animejs.com/documentation/utilities/map-range "mapRange()") - [roundPad()](https://animejs.com/documentation/utilities/round-pad "roundPad()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Remove Animation Targets remove() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) # [remove()](https://animejs.com/documentation/utilities/remove "remove()") Removes one or multiple targets from all active animations, a specific instance or a specific property, cancelling any [Animation](https://animejs.com/documentation/animation) or [Timeline](https://animejs.com/documentation/timeline) referencing these targets if needed. ```js hljs language-javascript const removed = utils.remove(targets, instance, propertyName); ``` ## Parameters | Name | Accepts | | --- | --- | | targets | [Targets](https://animejs.com/documentation/animation/targets "Targets") | | instance (opt) | [Animation](https://animejs.com/documentation/animation "Animation") \| [Timeline](https://animejs.com/documentation/timeline "Timeline") | | propertyName (opt) | [Animatable Properties](https://animejs.com/documentation/animation/animatable-properties) name `String` | ## Returns An `Array` of the removed targeted elements ```hljs javascript import { animate, utils } from 'animejs'; let updates = 0; const [ $removeFirstButton ] = utils.$('.remove-1'); const [ $removeSecondButton ] = utils.$('.remove-2'); const [ $updates ] = utils.$('.value'); const animation = animate('.square', { x: '17rem', rotate: 360, alternate: true, loop: true, onUpdate: () => { $updates.textContent = updates++; } }); $removeFirstButton.onclick = () => { utils.remove('.row:nth-child(1) .square'); } $removeSecondButton.onclick = () => { utils.remove('.row:nth-child(2) .square', animation, 'x'); } ``` ```hljs html language-xml 
  updates
  --
``` **Previous** **Next** - [set()](https://animejs.com/documentation/utilities/set "set()") - [cleanInlineStyles()](https://animejs.com/documentation/utilities/clean-inline-styles "cleanInlineStyles()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates 100 ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Installation Guide Getting started Search # [Getting started](https://animejs.com/documentation/getting-started "Getting started") This section covers how to download, install and import Anime.js in your project. If you're migrating from v3, please check out the [migration guide](https://github.com/juliangarnier/anime/wiki/Migrating-from-v3-to-v4) on GitHub. **In this section** - [Installation](https://animejs.com/documentation/getting-started/installation "Installation") - [Imports](https://animejs.com/documentation/getting-started/imports "Imports") - [Using with vanilla JS](https://animejs.com/documentation/getting-started/using-with-vanilla-js "Using with vanilla JS") - [Using with React](https://animejs.com/documentation/getting-started/using-with-react "Using with React") **Previous** **Next** - [Documentation](https://animejs.com/documentation "Documentation") - [Installation](https://animejs.com/documentation/getting-started/installation "Installation") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Animation Targets Guide Targets Search [Animation](https://animejs.com/documentation/animation "Animation") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Targets](https://animejs.com/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. ```js hljs language-javascript 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](https://animejs.com/documentation/animation/targets/css-selector "CSS Selector") - [DOM Elements](https://animejs.com/documentation/animation/targets/dom-elements "DOM Elements") - [JavaScript Objects](https://animejs.com/documentation/animation/targets/javascript-objects "JavaScript Objects") - [Array of targets](https://animejs.com/documentation/animation/targets/array-of-targets "Array of targets") **Previous** **Next** - [Animation](https://animejs.com/documentation/animation "Animation") - [CSS Selector](https://animejs.com/documentation/animation/targets/css-selector "CSS Selector") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Array Shuffle Utility shuffle() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [shuffle() V4](https://animejs.com/documentation/utilities/shuffle "shuffle()") Mutates an array by randomizing the order of its elements. ```js hljs language-javascript const shuffledArray = utils.shuffle(array); ``` ## Parameters | Name | Accepts | | --- | --- | | array | `Array` | ## Returns The mutated `Array` ```hljs javascript import { utils } from 'animejs'; const [ $shuffle ] = utils.$('button'); const squares = utils.$('.square'); const x = stagger('3.2rem'); // Initial squares x position utils.set(squares, { x }); const shuffle = () => animate(utils.shuffle(squares), { x }); $shuffle.addEventListener('click', shuffle); ``` ```hljs html language-xml
A
B
C
D
E
F
``` **Previous** **Next** - [randomPick()](https://animejs.com/documentation/utilities/random-pick "randomPick()") - [sync()](https://animejs.com/documentation/utilities/sync "sync()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Set Properties Utility set() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) # [set()](https://animejs.com/documentation/utilities/set "set()") Immediately sets one or multiple properties values to one or multiple targets. ```js hljs language-javascript const setter = utils.set(targets, properties); ``` ## Parameters | Name | Accepts | Description | | --- | --- | --- | | targets | [Targets](https://animejs.com/documentation/animation/targets "Targets") | The targeted element(s) | | properties | `Object` | An object of valid properties and values of the target | ## Returns [Animation](https://animejs.com/documentation/animation "Animation") `utils.set()` is useful for setting complex values, but for repeatedly updating the same properties on the same targets, using an [Animatable](https://animejs.com/documentation/animatable) is recommended for better performances. `utils.set()` won't work if you try to set an attribute on a DOM or SVG element not already defined on the element. ```hljs javascript import { utils, stagger } from 'animejs'; const [ $set, $revert ] = utils.$('button'); const squares = utils.$('.square'); const colors = ['red', 'orange', 'yellow']; let setter; const setStyles = () => { setter = utils.set(squares, { borderRadius: '50%', y: () => utils.random(-1, 1) + 'rem', scale: stagger(.1, { start: .25, ease: 'out' }), color: () => `var(--hex-${utils.randomPick(colors)})` }); $set.setAttribute('disabled', 'true'); $revert.removeAttribute('disabled'); } const revertStyles = () => { setter.revert(); $set.removeAttribute('disabled'); $revert.setAttribute('disabled', 'true'); } $set.addEventListener('click', setStyles); $revert.addEventListener('click', revertStyles); ``` ```hljs html language-xml
``` **Previous** **Next** - [get()](https://animejs.com/documentation/utilities/get "get()") - [remove()](https://animejs.com/documentation/utilities/remove "remove()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Random Number Generator random() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) # [random()](https://animejs.com/documentation/utilities/random "random()") Returns a random `Number` within a specified range, with an optional third parameter determining the number of decimal places. ```js hljs language-javascript const randomValue = utils.random(min, max, decimalLength); ``` ## Parameters | Name | Accepts | | --- | --- | | min | `Number` | | max | `Number` | | decimalLength=0 (opt) | `Number` | ## Returns `Number` ```hljs javascript import { utils } from 'animejs'; utils.set('.square', { x: () => utils.random(2, 18, 2) + 'rem', rotate: () => utils.random(0, 180), scale: () => utils.random(.25, 1.5, 3), }); ``` ```hljs html language-xml
``` **Previous** **Next** - [cleanInlineStyles()](https://animejs.com/documentation/utilities/clean-inline-styles "cleanInlineStyles()") - [randomPick()](https://animejs.com/documentation/utilities/random-pick "randomPick()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Synchronized Callback Execution sync() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [sync() V4](https://animejs.com/documentation/utilities/sync "sync()") Execute a callback function in sync with the engine loop. ```js hljs language-javascript utils.sync(function); ``` ## Parameters | Name | Accepts | | --- | --- | | callback | `Function` | ## Returns `Timer` ```hljs javascript import { animate, utils } from 'animejs'; const [ $range ] = utils.$('.range'); const [ $speed ] = utils.$('.speed'); const animation = animate('.circle', { x: '16rem', loop: true, alternate: true, playbackRate: 1, }); const updateSpeed = () => { const { value } = $range; $speed.innerHTML = utils.roundPad(+value, 2); utils.sync(() => animation.speed = value); } $range.addEventListener('input', updateSpeed); ``` ```hljs html language-xml 
    speed
    1.00
``` **Previous** **Next** - [shuffle()](https://animejs.com/documentation/utilities/shuffle "shuffle()") - [lerp()](https://animejs.com/documentation/utilities/lerp "lerp()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## SVG Morphing Animation morphTo() Search [SVG](https://animejs.com/documentation/svg "SVG") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [morphTo()](https://animejs.com/documentation/svg/morphto "morphTo()") Creates a morphing animation from one SVG shape to another by passing the `morphTo()` function to the `d` property of a `SVGPathElement` or to the `points` property of a `SVGPolylineElement` or a `SVGPolygonElement`. An optional `precision` parameter can be set to configure the amount of points generated to morph the two shapes. If the precision parameter is set `0`, now points extrapolation is generated. ```js hljs language-javascript svg.morphTo(shapeTarget, precision); ``` ## Parameters | Name | Accepts | | --- | --- | | shapeTarget | [CSS selector](https://animejs.com/documentation/animation/targets/css-selector "CSS selector") \| `SVGPathElement` \| `SVGPolylineElement` \| `SVGPolygonElement` | | precision=.33 (opt) | A `Number` between `0` and `1` | ## Returns An `Array` containing the shape's starting and final `String` values ```hljs javascript import { animate, svg, utils } from 'animejs'; const [ $path1, $path2 ] = utils.$('polygon'); function animateRandomPoints() { // Update the points attribute on #path-2 utils.set($path2, { points: generatePoints() }); // Morph the points of #path-1 into #path-2 animate($path1, { points: svg.morphTo($path2), ease: 'inOutCirc', duration: 500, onComplete: animateRandomPoints }); } // Start the animation animateRandomPoints(); // A function to generate random points on #path-2 on each iteration // For demo purpose only function generatePoints() { const total = utils.random(4, 64); const r1 = utils.random(4, 56); const r2 = 56; const isOdd = n => n % 2; let points = ''; for (let i = 0, l = isOdd(total) ? total + 1 : total; i < l; i++) { const r = isOdd(i) ? r1 : r2; const a = (2 * Math.PI * i / l) - Math.PI / 2; const x = 152 + utils.round(r * Math.cos(a), 0); const y = 56 + utils.round(r * Math.sin(a), 0); points += `${x},${y} `; } return points; } ``` ```hljs html language-xml ``` **Previous** **Next** - [SVG](https://animejs.com/documentation/svg "SVG") - [createDrawable()](https://animejs.com/documentation/svg/createdrawable "createDrawable()") ## SVG Animation with Anime.js createMotionPath() Search [SVG](https://animejs.com/documentation/svg "SVG") # [createMotionPath()](https://animejs.com/documentation/svg/createmotionpath "createMotionPath()") Creates pre-defined [Tween parameter](https://animejs.com/documentation/animation/tween-parameters "Tween parameter") objects that animate along an SVGPathElement's coordinates and inclination. ```js hljs language-javascript const { translateX, translateY, rotate } = svg.createMotionPath(path); ``` ## Parameters | Name | Type | | --- | --- | | path | [CSS selector](https://animejs.com/documentation/animation/targets/css-selector "CSS selector") \| `SVGPathElement` | ## Returns An `Object` with the following properties: | Name | Type | Description | | --- | --- | --- | | translateX | [Tween parameter](https://animejs.com/documentation/animation/tween-parameters "Tween parameter") | Map to the x coordinate of the path element | | translateY | [Tween parameter](https://animejs.com/documentation/animation/tween-parameters "Tween parameter") | Map to the y coordinate of the path element | | rotate | [Tween parameter](https://animejs.com/documentation/animation/tween-parameters "Tween parameter") | Map to the angle of the path element | ```hljs javascript import { animate, svg } from 'animejs'; // Animate the transforms properties of .car the motion path values const carAnimation = animate('.car', { ease: 'linear', duration: 5000, loop: true, ...svg.createMotionPath('path') }); // Line drawing animation following the motion path values // For demo aesthetic only animate(svg.createDrawable('path'), { draw: '0 1', ease: 'linear', duration: 5000, loop: true }); ``` ```hljs html language-xml Suzuka
``` **Previous** **Next** - [createDrawable()](https://animejs.com/documentation/svg/createdrawable "createDrawable()") - [Utilities](https://animejs.com/documentation/utilities "Utilities") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Linear Interpolation Function lerp() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [lerp() V4](https://animejs.com/documentation/utilities/lerp "lerp()") Performs a linear interpolation between two values. The closer the amount is to `1`, the closer the result is to the _end_ value. The `utils.lerp()` function is [frame rate independent](https://www.rorydriscoll.com/2016/03/07/frame-rate-independent-damping-using-lerp/). ```js hljs language-javascript const lerped = utils.lerp(start, end, amount); ``` ## Parameters | Name | Accepts | | --- | --- | | start | `Number` | | end | `Number` | | amount | `Number [0-1]` | ## Returns `Number` ```js hljs language-javascript utils.lerp(0, 100, 0); // 0 utils.lerp(0, 100, 0.5); // 50 utils.lerp(0, 100, 1); // 100 ``` ```hljs javascript import { animate, createTimer, utils } from 'animejs'; const [ $input ] = utils.$('.input'); const [ $lerped ] = utils.$('.lerped'); const [ $lerped15fps ] = utils.$('.lerped-15'); animate($input, { rotate: '1000turn', modifier: utils.snap(.25), duration: 4000000, loop: true, ease: 'linear', }); const loop = createTimer({ onUpdate: clock => { const sourceRotate = utils.get($input, 'rotate', false); const lerpedRotate = utils.get($lerped, 'rotate', false); utils.set($lerped, { rotate: utils.lerp(lerpedRotate, sourceRotate, .075) + 'turn' }); } }); const loop15fps = createTimer({ frameRate: 15, onUpdate: clock => { const sourceRotate = utils.get($input, 'rotate', false); const lerpedRotate = utils.get($lerped15fps, 'rotate', false); utils.set($lerped15fps, { rotate: utils.lerp(lerpedRotate, sourceRotate, .0725, clock) + 'turn' }); } }); ``` ```hljs html language-xml
input
lerped
lerped 15fps
``` **Previous** **Next** - [sync()](https://animejs.com/documentation/utilities/sync "sync()") - [round()](https://animejs.com/documentation/utilities/round "round()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Number Snapping Utility snap() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [snap() V4](https://animejs.com/documentation/utilities/snap "snap()") Rounds a `Number` to the nearest specified _increment_ or creates a snapping `Function` with a pre-defined _increment_ parameter. If an `Array` is provided as the increment, it selects the closest value from the array. ```js hljs language-javascript const snappedValue = utils.snap(value, increment); const snapperFunction = utils.snap(increment); ``` ## Parameters | Name | Accepts | | --- | --- | | value (opt) | `Number` | | increment | `Number` \| `Array` | ## Returns A `Number` if a value is provided, otherwise a [chain-able utility](https://animejs.com/documentation/utilities/chain-able-utility-functions "chain-able utility") `Function` to snap numbers to the nearest _increment_ or array value: ```js hljs language-javascript const snapTo10 = utils.snap(10); snapTo10(94); // 90 snapTo10(-17); // -20 const snapToArray = utils.snap([0, 50, 100]); snapToArray(30); // 50 snapToArray(75); // 100 snapToArray(-10); // 0 const clampAndSnap = utils.clamp(0, 100).snap(30); clampAndSnap(72.7523); // 60 clampAndSnap(120.2514); // 90 ``` ```hljs javascript import { animate, utils } from 'animejs'; animate('.normal', { rotate: '1turn', duration: 3000, loop: true, ease: 'inOut', }); animate('.snapped', { rotate: '1turn', modifier: utils.snap(.25), // Used as a modifier duration: 3000, loop: true, ease: 'inOut', }); ``` ```hljs html language-xml
normal
snapped (.25)
``` **Previous** **Next** - [clamp()](https://animejs.com/documentation/utilities/clamp "clamp()") - [wrap()](https://animejs.com/documentation/utilities/wrap "wrap()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## get() Utility Function get() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) # [get()](https://animejs.com/documentation/utilities/get "get()") Returns the current value of a target's property, with optional unit conversion or removal. ```js hljs language-javascript const value = utils.get(target, property, unit); ``` ## Parameters | Name | Accepts | Description | | --- | --- | --- | | target | [Targets](https://animejs.com/documentation/animation/targets "Targets") | The targeted element | | property | `String` | A valid property name of the target | | unit (opt) | `String` \| `Boolean` | Strip the unit if set to `false` or convert the unit if a valid unit `String` is passed | ## Returns The returned property value type or the following types if the conditions are met: | Type | Condition | | --- | --- | | `String` | The target is an `HTMLElement` or `SVGElement` and the `unit` parameter is not set to `false` or set to a valid unit `String` | | `Number` | The target is an `HTMLElement` or `SVGElement` and the `unit` parameter set to `false` | ```hljs javascript import { animate, utils } from 'animejs'; const [ $raw, $rem, $num ] = utils.$('.value'); const [ $sq1, $sq2, $sq3 ] = utils.$('.square'); const getValues = () => { // Return the raw parsed value (string with px) $raw.textContent = utils.get($sq1, 'x'); // Return the converted value with unit (string with rem) $rem.textContent = utils.get($sq2, 'x', 'rem'); // Return the raw value with its unit removed (number) $num.textContent = utils.get($sq3, 'x', false); } animate('.square', { x: 270, loop: true, alternate: true, onUpdate: getValues }); ``` ```hljs html language-xml
``` **Previous** **Next** - [$()](https://animejs.com/documentation/utilities/dollar-sign "$()") - [set()](https://animejs.com/documentation/utilities/set "set()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka 261.825px 16.3641rem 261.825 Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Clamp Utility Function clamp() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [clamp() V4](https://animejs.com/documentation/utilities/clamp "clamp()") Restricts a `Number` between the specified _min_ and _max_ values or creates a clamping `Function` with pre-defined _min_ and _max_ parameters. ```js hljs language-javascript const clampedValue = utils.clamp(value, min, max); const clamperFunction = utils.clamp(min, max); ``` ## Parameters | Name | Accepts | | --- | --- | | value (opt) | `Number` | | min | `Number` | | max | `Number` | ## Returns A `Number` if a value is provided, otherwise a [chain-able utility](https://animejs.com/documentation/utilities/chain-able-utility-functions "chain-able utility") `Function` to clamp numbers between the specified _min_ and _max_ values: ```js hljs language-javascript const clampBetween0and100 = utils.clamp(0, 100); clampBetween0and100(90); // 90 clampBetween0and100(120); // 100 clampBetween0and100(-15); // 0 const clampAndRound = utils.clamp(0, 100).round(2); // Clamp then round to 2 decimal places clampAndRound(72.7523); // 72.75 clampAndRound(120.2514); // 100 ``` ```hljs javascript import { animate, utils } from 'animejs'; animate('.normal', { rotate: '1turn', duration: 3000, loop: true, ease: 'inOut', }); animate('.clamped', { rotate: '1turn', modifier: utils.clamp(.25, .75), // Used as a function duration: 3000, loop: true, ease: 'inOut', }); ``` ```hljs html language-xml
normal
clamped [.25,.75]
``` **Previous** **Next** - [round()](https://animejs.com/documentation/utilities/round "round()") - [snap()](https://animejs.com/documentation/utilities/snap "snap()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Number Rounding Utility round() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [round()](https://animejs.com/documentation/utilities/round "round()") Rounds a `Number` to a specified number of decimal places or creates a rounding `Function` with a pre-defined _decimalLength_ parameter. ```js hljs language-javascript const roundedValue = utils.round(value, decimalLength); const roundingFunction = utils.round(decimalLength); ``` ## Parameters | Name | Accepts | | --- | --- | | value (opt) | `Number` | | decimalLength | `Number` | ## Returns A `Number` if a value is provided, otherwise a [chain-able utility](https://animejs.com/documentation/utilities/chain-able-utility-functions "chain-able utility") `Function` to round numbers with the specified decimal length: ```js hljs language-javascript const clampAndRound = utils.clamp(0, 100).round(2); // Clamp then round to 2 decimal places clampAndRound(72.7523); // 72.75 clampAndRound(120.2514); // 100 ``` ```hljs javascript import { animate, utils } from 'animejs'; animate('.normal', { rotate: '1turn', duration: 3000, loop: true, }); animate('.rounded', { rotate: '1turn', modifier: utils.round(1), // Used as a function duration: 3000, loop: true, }); ``` ```hljs html language-xml
normal
rounded (.1)
``` **Previous** **Next** - [lerp()](https://animejs.com/documentation/utilities/lerp "lerp()") - [clamp()](https://animejs.com/documentation/utilities/clamp "clamp()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Add Animations Add animations Search [Timeline](https://animejs.com/documentation/timeline "Timeline") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) # [Add animations](https://animejs.com/documentation/timeline/add-animations "Add animations") Animations can be added to a timeline using the [`add()`](https://animejs.com/documentation/timeline/timeline-methods/add "add()") method or the [`sync()`](https://animejs.com/documentation/timeline/timeline-methods/sync "sync()") method. ## Animation creation Creates and adds an animation directly to the timeline with the [`add()`](https://animejs.com/documentation/timeline/timeline-methods/add "add()") method. This allows tween value composition with the timeline's existing children. ```js hljs language-javascript timeline.add(targets, parameters, position); ``` ### Parameters | Name | Accepts | | --- | --- | | targets | [Targets](https://animejs.com/documentation/animation/targets "Targets") | | parameters | An `Object` of [Animatable properties](https://animejs.com/documentation/animation/animatable-properties "Animatable properties"), [Tween parameters](https://animejs.com/documentation/animation/tween-parameters "Tween parameters"), [Playback settings](https://animejs.com/documentation/animation/animation-playback-settings "Animation playback settings") and [Animation callbacks](https://animejs.com/documentation/animation/animation-callbacks "Animation callbacks") | | position (opt) | [Time position](https://animejs.com/documentation/timeline/time-position "Time position") | ## Animation synchronisation Synchronises an existing animation with the [`sync()`](https://animejs.com/documentation/timeline/timeline-methods/sync "sync()") method. Tween value composition is handled when the animation is created, and won't affect the timeline's existing children when added. ```js hljs language-javascript const animation = animate(target, { x: 100 }); timeline.sync(animation, position); ``` ### Parameters | Name | Accepts | | --- | --- | | animation | [Animation](https://animejs.com/documentation/animation "Animation") | | position (opt) | [Time position](https://animejs.com/documentation/timeline/time-position "Time position") | ## Returns The timeline itself Can be chained with other timeline methods. ```hljs javascript import { createTimeline, animate } from 'animejs'; const circleAnimation = animate('.circle', { x: '15rem' }); const tl = createTimeline() .sync(circleAnimation) .add('.triangle', { x: '15rem', rotate: '1turn', duration: 500, alternate: true, loop: 2, }) .add('.square', { x: '15rem', }); ``` ```hljs html language-xml
``` **Previous** **Next** - [Add timers](https://animejs.com/documentation/timeline/add-timers "Add timers") - [Sync WAAPI animations](https://animejs.com/documentation/timeline/sync-waapi-animations "Sync WAAPI animations") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Documentation ### CSS Selector ### DOM Node ### Node List ### JavaScript Object ``` {"charged":"0%"} ``` ### JavaScript Array ### CSS ### CSS Transforms ### Object properties ``` {"prop1":0,"prop2":"0%"} ``` ### DOM Attributes ### SVG Attributes ### Duration ### Delay ### Easing ### Specific property parameters ### Duration ### Delay ### Elasticity ### Combined ### Direction alternate ### Direction reverse ### Loop (x times) ### Loop alternate (x times) ### Loop reverse (x times) ### Infinite loop ### Infinite loop alternate ### Infinite loop reverse ### Unitless ### Specific unit ### Relative ### Colors ### Specific initial value ### Function based values ### Keyframes ### Basic timeline ### Relative offset ### Absolute offset ### Basic Timeline parameters ### Parameters inheritance ### Play / Pause PlayPause ### Restart Restart ### Reverse Reverse ### Seek ### Timeline controls PlayPauseRestart ### All callbacks ### Update ### Begin ### Run ### Complete ### Finished ### Motion path ### Morphing ### Line drawing ### Built in equations ### Elasticity ### Custom Bézier curves ### Custom easing function ``` var cssSelector = anime({ targets: '#cssSelector .el', translateX: 250 }); ``` ```
``` ## Timeline Callbacks Timeline callbacks Search [Timeline](https://animejs.com/documentation/timeline "Timeline") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) # [Timeline callbacks](https://animejs.com/documentation/timeline/timeline-callbacks "Timeline callbacks") Execute functions at specific points during a timeline playback. Timeline callbacks functions are defined directly in the `createTimeline()` parameters `Object`. ```js hljs language-javascript createTimeline({ defaults: { ease: 'out(3)', duration: 500, }, loop: 3, alternate: true, autoplay: false, ┌─────────────────────┐ │ onBegin: () => {}, │ │ onLoop: () => {}, ├─ Callbacks │ onUpdate: () => {}, │ └─────────────────────┘ }); ``` **In this section** - [onBegin](https://animejs.com/documentation/timeline/timeline-callbacks/onbegin "onBegin") - [onComplete](https://animejs.com/documentation/timeline/timeline-callbacks/oncomplete "onComplete") - [onBeforeUpdate](https://animejs.com/documentation/timeline/timeline-callbacks/onbeforeupdate "onBeforeUpdate") - [onUpdate](https://animejs.com/documentation/timeline/timeline-callbacks/onupdate "onUpdate") - [onRender](https://animejs.com/documentation/timeline/timeline-callbacks/onrender "onRender") - [onLoop](https://animejs.com/documentation/timeline/timeline-callbacks/onloop "onLoop") - [onPause](https://animejs.com/documentation/timeline/timeline-callbacks/onpause "onPause") - [then()](https://animejs.com/documentation/timeline/timeline-callbacks/then "then()") **Previous** **Next** - [Timeline playback settings](https://animejs.com/documentation/timeline/timeline-playback-settings "Timeline playback settings") - [onBegin](https://animejs.com/documentation/timeline/timeline-callbacks/onbegin "onBegin") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## padStart() Utility padStart() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [padStart() V4](https://animejs.com/documentation/utilities/pad-start "padStart()") Pads a `Number` from the start with a string until the result reaches a given length or creates a padding `Function` with pre-defined _totalLength_ and _padString_ parameters. ```js hljs language-javascript const paddedValue = utils.padStart(value, totalLength, padString); const padderFunction = utils.padStart(totalLength, padString); ``` ## Parameters | Name | Accepts | | --- | --- | | value (opt) | `String` / `Number` | | totalLength | `Number` | | padString | `String` | ## Returns A `String` if a value is provided, otherwise a [chain-able utility](https://animejs.com/documentation/utilities/chain-able-utility-functions "chain-able utility") `Function` to pad numbers from the start: ```js hljs language-javascript const padTo5WithZeros = utils.padStart(5, '0'); padTo5WithZeros('123'); // '00123' padTo5WithZeros(78); // '00078' padTo5WithZeros('1234'); // '01234' const roundAndPad = utils.round(2).padStart(5, '0'); // Round to 2 decimal places then pad to 5 characters roundAndPad(12.345); // '12.35' roundAndPad(7.8); // '07.80' ``` ```hljs javascript import { animate, utils } from 'animejs'; animate('.value', { innerHTML: 10000, modifier: utils.round(0).padStart(6, '-'), duration: 100000, ease: 'linear', }); ``` ```hljs html language-xml 
    0
``` **Previous** **Next** - [roundPad()](https://animejs.com/documentation/utilities/round-pad "roundPad()") - [padEnd()](https://animejs.com/documentation/utilities/pad-end "padEnd()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` ---538 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Imports Guide Imports Search [Getting started](https://animejs.com/documentation/getting-started "Getting started") # [Imports V4](https://animejs.com/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: ```js hljs language-javascript import { animate, createTimeline, createTimer, // ...other methods } from 'animejs'; ``` ### Global object You can define _Anime.js_ globally using a script tag like this: ```html hljs language-xml ``` Then access all the modules directly from `anime` object: ```js hljs language-javascript 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: ```js hljs language-javascript const { animate, createTimeline, createTimer, // ...other methods } = anime; ``` **Previous** **Next** - [Installation](https://animejs.com/documentation/getting-started/installation "Installation") - [Using with vanilla JS](https://animejs.com/documentation/getting-started/using-with-vanilla-js "Using with vanilla JS") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Draggable Properties Draggable properties Search [Draggable](https://animejs.com/documentation/draggable "Draggable") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Draggable properties](https://animejs.com/documentation/draggable/draggable-properties "Draggable properties") ```js hljs language-javascript const draggable = createDraggable(target, parameters); ┌──────────┐ draggable.│progressX │ draggable.│progressY ├─ Properties draggable.│velocity │ └──────────┘ ``` | Name | Description | | --- | --- | | snapX | Gets and sets the snap value of the x axis ( `Number|Array`) | | snapY | Gets and sets the snap value of the y axis ( `Number|Array`) | | scrollSpeed | Gets and sets the speed value at which the draggable container auto scrolls ( `Number`) | | scrollThreshold | Gets and sets the threshold distance from container edges before auto-scrolling begins ( `Number`) | | dragSpeed | Gets and sets the speed value at which the draggable element gets dragged ( `Number`) | | maxVelocity | Gets and sets the maximum velocity limit for the draggable element ( `Number`) | | minVelocity | Gets and sets the minimum velocity limit for the draggable element ( `Number`) | | velocityMultiplier | Gets and sets the multiplier applied to velocity calculations ( `Number`) | | releaseEase | Gets and sets the easing function applied to the draggable element animations ( `Function`) | | releaseSpring | Gets the internal spring used to move the draggable element after release ( `Spring`) | | containerPadding | Gets and sets padding values for the container \[top, right, bottom, left\] ( `Array`) | | containerFriction | Gets and sets the friction value applied within the container ( `Number`) | | containerBounds | Gets the bounds of the container \[top, right, bottom, left\] ( `Array`) | | containerArray | Gets array of container elements if multiple containers were provided ( `Array|null`) | | $container | Gets and sets the container element ( `HTMLElement`) | | $target | Gets and sets the target element ( `HTMLElement`) | | $trigger | Gets the trigger element ( `HTMLElement`) | | $scrollContainer | Gets the scroll container (window or container element) ( `Window|HTMLElement`) | | x | Gets and sets the x position ( `Number`) | | y | Gets and sets the y position of the dragged element ( `Number`) | | progressX | Gets and sets the progress (0-1) of the x position relative to the container ( `Number`) | | progressY | Gets and sets the progress (0-1) of the y position relative to the container ( `Number`) | | velocity | Gets the current velocity of the draggable element ( `Number`) | | angle | Gets the current angle in radians of the draggable element ( `Number`) | | xProp | Gets the mapped x property name ( `String`) | | yProp | Gets the mapped y property name ( `String`) | | destX | Gets the currently defined destination of the x axis ( `Number`) | | destY | Gets the currently defined destination of the y axis ( `Number`) | | deltaX | Gets the current delta of the x axis ( `Number`) | | deltaY | Gets the current delta of the y axis ( `Number`) | | enabled | Returns `true` if the draggable is enabled ( `Boolean`) | | grabbed | Returns `true` if the element is currently being grabbed ( `Boolean`) | | dragged | Returns `true` if the element is currently being dragged ( `Boolean`) | | cursor | Gets and sets cursor behavior ( `Boolean|DraggableCursorParams`) | | disabled | Gets the disabled state for \[x, y\] axes ( `Array`) | | fixed | Returns `true` if the target element has position:fixed ( `Boolean`) | | useWin | Returns `true` if using window as container ( `Boolean`) | | isFinePointer | Gets and sets whether fine pointer (e.g. mouse) is being used ( `Boolean`) | | initialized | Returns `true` if the draggable has been initialized ( `Boolean`) | | canScroll | Returns `true` if auto-scrolling is possible ( `Boolean`) | | contained | Returns `true` if draggable is contained within bounds ( `Boolean`) | | manual | Returns `true` if in manual control mode ( `Boolean`) | | released | Returns `true` if element was just released ( `Boolean`) | | updated | Returns `true` if position was just updated ( `Boolean`) | | scroll | Gets the current scroll position {x, y} ( `Object`) | | coords | Gets the current and previous coordinates \[x, y, prevX, prevY\] ( `Array`) | | snapped | Gets the snap state for \[x, y\] axes ( `Array`) | | pointer | Gets current and previous pointer positions \[x, y, prevX, prevY\] ( `Array`) | | scrollView | Gets the scroll view dimensions \[width, height\] ( `Array`) | | dragArea | Gets the drag area bounds \[x, y, width, height\] ( `Array`) | | scrollBounds | Gets the scroll container bounds \[top, right, bottom, left\] ( `Array`) | | targetBounds | Gets the target element bounds \[top, right, bottom, left\] ( `Array`) | | window | Gets the window dimensions \[width, height\] ( `Array`) | | pointerVelocity | Gets the current pointer velocity ( `Number`) | | pointerAngle | Gets the current pointer angle in radians ( `Number`) | | activeProp | Gets the active property being animated ( `String`) | | onGrab | Gets and sets the callback fired when element is grabbed ( `Function`) | | onDrag | Gets and sets the callback fired while dragging ( `Function`) | | onRelease | Gets and sets the callback fired on release ( `Function`) | | onUpdate | Gets and sets the callback fired on any position update ( `Function`) | | onSettle | Gets and sets the callback fired when movement settles ( `Function`) | | onSnap | Gets and sets the callback fired when element snaps ( `Function`) | | onResize | Gets and sets the callback fired when container/element resizes ( `Function`) | | onAfterResize | Gets and sets the callback fired after resize handling completes ( `Function`) | **Previous** **Next** - [Draggable methods](https://animejs.com/documentation/draggable/draggable-methods "Draggable methods") - [ScrollObserver](https://animejs.com/documentation/scroll "ScrollObserver") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Web Animation API Guide Web Animation API Search # [Web Animation API V4](https://animejs.com/documentation/web-animation-api "Web Animation API") ## Create WAAPI powered animations with the simplicity of Anime.js Anime.js offers a even more lightweight alternative (3KB versus 10KB) to the [`animate()`](https://animejs.com/documentation/animation) method that uses the Web Animation [`Element.animate()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate "WAAPI Element `animate()` method") API under the hood. WAAPI powered animations are created using the `waapi.animate()` method. ```js hljs language-javascript import { waapi } from 'animejs'; const animation = waapi.animate(targets, parameters); ``` ## Parameters | Name | Accepts | | --- | --- | | targets | [Targets](https://animejs.com/documentation/animation/targets "Targets") | | parameters | An `Object` of [Animatable properties](https://animejs.com/documentation/animation/animatable-properties "Animatable properties"), [Tween parameters](https://animejs.com/documentation/animation/tween-parameters "Tween parameters"), [Playback settings](https://animejs.com/documentation/animation/animation-playback-settings "Animation playback settings") and [Animation callbacks](https://animejs.com/documentation/animation/animation-callbacks "Animation callbacks") | ## Returns WAAPIAnimation ```hljs javascript import { waapi, stagger } from 'animejs'; waapi.animate('span', { translate: `0 -2rem`, delay: stagger(100), duration: 600, loop: true, alternate: true, ease: 'inOut(2)', }); ``` ```hljs html language-xml

H E L L O   W A A P I

``` **In this section** - [When to use](https://animejs.com/documentation/web-animation-api/when-to-use-waapi "When to use WAAPI") - [Hardware-acceleration](https://animejs.com/documentation/web-animation-api/hardware-accelerated-animations "Hardware-accelerated animations") - [Improvements to WAAPI](https://animejs.com/documentation/web-animation-api/improvements-to-the-web-animation-api "Improvements to the Web Animation API") - [API differences](https://animejs.com/documentation/web-animation-api/api-differences-with-native-waapi "API differences with native WAAPI") - [convertEase()](https://animejs.com/documentation/web-animation-api/waapi-convertease "waapi.convertEase()") **Previous** **Next** - [Utilities](https://animejs.com/documentation/utilities "Utilities") - [When to use WAAPI](https://animejs.com/documentation/web-animation-api/when-to-use-waapi "When to use WAAPI") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Add Timers Add timers Search [Timeline](https://animejs.com/documentation/timeline "Timeline") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Add timers V4](https://animejs.com/documentation/timeline/add-timers "Add timers") Timers can be added to a timeline using the [`add()`](https://animejs.com/documentation/timeline/timeline-methods/add "add()") method or the [`sync()`](https://animejs.com/documentation/timeline/timeline-methods/sync "sync()") method. ## Timer creation Creates and adds a timer directly to the timeline using the [`add()`](https://animejs.com/documentation/timeline/timeline-methods/add "add()") method. ```js hljs language-javascript timeline.add(parameters, position); ``` ### Parameters | Name | Accepts | | --- | --- | | parameters | An `Object` of [Timer playback settings](https://animejs.com/documentation/timer/timer-playback-settings "Timer playback settings") and [Timer callbacks](https://animejs.com/documentation/timer/timer-callbacks "Timer callbacks") | | position (opt) | [Time position](https://animejs.com/documentation/timeline/time-position "Time position") | ## Timer synchronisation Synchronises an existing timer with the [`sync()`](https://animejs.com/documentation/timeline/timeline-methods/sync "sync()") method. ```js hljs language-javascript timeline.sync(timer, position); ``` ### Parameters | Name | Accepts | | --- | --- | | timer | [Timer](https://animejs.com/documentation/timer "Timer") | | position (opt) | [Time position](https://animejs.com/documentation/timeline/time-position "Time position") | ## Returns The timeline itself Can be chained with other timeline methods. ```hljs javascript import { createTimeline, createTimer, utils } from 'animejs'; const [ $timer01, $timer02, $timer03 ] = utils.$('.timer'); const timer1 = createTimer({ duration: 1500, onUpdate: self => $timer01.innerHTML = self.currentTime, }); const tl = createTimeline() .sync(timer1) .add({ duration: 500, onUpdate: self => $timer02.innerHTML = self.currentTime, }) .add({ onUpdate: self => $timer03.innerHTML = self.currentTime, duration: 1000 }); ``` ```hljs html language-xml 
      timer 01
      0
    
      timer 02
      0
    
      timer 03
      0
``` **Previous** **Next** - [Timeline](https://animejs.com/documentation/timeline "Timeline") - [Add animations](https://animejs.com/documentation/timeline/add-animations "Add animations") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 1500 ``` ``` timer 02 500 ``` ``` timer 03 1000 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Animatable Methods Animatable methods Search [Animatable](https://animejs.com/documentation/animatable "Animatable") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Animatable methods](https://animejs.com/documentation/animatable/animatable-methods "Animatable methods") Triggers animations attached to the animatable properties. Animation methods are available on an Animatable instance `Object`. ```js hljs language-javascript const animatable = createAnimatable(target, parameters); ┌─────────────────────┐ animatable.│x(100) │ animatable.│y(50, 500, 'out(2)') ├─ Methods animatable.│revert() │ └─────────────────────┘ ``` **In this section** - [Getters](https://animejs.com/documentation/animatable/animatable-methods/getters "Getters") - [Setters](https://animejs.com/documentation/animatable/animatable-methods/setters "Setters") - [revert()](https://animejs.com/documentation/animatable/animatable-methods/revert "revert()") **Previous** **Next** - [Animatable settings](https://animejs.com/documentation/animatable/animatable-settings "Animatable settings") - [Getters](https://animejs.com/documentation/animatable/animatable-methods/getters "Getters") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Installation Guide Installation Search [Getting started](https://animejs.com/documentation/getting-started "Getting started") # [Installation](https://animejs.com/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). ```bash hljs npm install animejs ``` Then import _Anime.js_ methods as **ES6 Modules** like this: ```js hljs language-javascript import { animate } from 'animejs'; ``` ## Linking from a CDN | CDN Name | URL | | --- | --- | | JsDelivr | [jsdelivr.com](https://www.jsdelivr.com/package/npm/animejs?tab=files) | ### ES6 Modules ```html hljs language-xml ``` ### Global object ```html hljs language-xml ``` ## 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](https://github.com/juliangarnier/anime/tree/master/lib). 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 | Once downloaded inside your project folder, link the library in your code like this: ### ES6 Modules ```html hljs language-xml ``` ### Global object ```html hljs language-xml ``` **Previous** **Next** - [Getting started](https://animejs.com/documentation/getting-started "Getting started") - [Imports](https://animejs.com/documentation/getting-started/imports "Imports") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Engine Properties Engine properties Search [Engine](https://animejs.com/documentation/engine "Engine") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Engine properties](https://animejs.com/documentation/engine/engine-properties "Engine properties") ```js hljs language-javascript import { engine } from 'animejs'; ┌───────────────────────┐ engine.│deltaTime │ engine.│useDefaultMainLoop ├─ Properties engine.│pauseOnDocumentHidden │ └───────────────────────┘ ``` | Name | Description | | --- | --- | | timeUnit | Gets and sets the unit of time to use for time-related values like `duration` and `delay` ( `'ms' | 's'`) | | currentTime | Gets the current time of the engine ( `Number`) | | deltaTime | Gets the time elapsed since the last frame ( `Number`) | | precision | Gets and sets how many decimal places to round string values to during an animation ( `Number`) | | speed | Gets or sets the global playback rate for all animations ( `Number`) | | fps | Gets or sets the global frame rate for all animations ( `Number`) | | useDefaultMainLoop | Gets or sets whether the engine uses its default main loop ( `Boolean`) | | pauseOnDocumentHidden | Gets or sets whether the engine pauses when the tab is hidden ( `Boolean`) | **Previous** **Next** - [Engine methods](https://animejs.com/documentation/engine/engine-methods "Engine methods") - [Engine defaults](https://animejs.com/documentation/engine/engine-defaults "Engine defaults") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Timer Callbacks Timer callbacks Search [Timer](https://animejs.com/documentation/timer "Timer") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Timer callbacks](https://animejs.com/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`. ```js hljs language-javascript createTimer({ duration: 1000, frameRate: true, loop: true, ┌─────────────────────┐ │ onBegin: () => {}, │ │ onLoop: () => {}, ├─ Callbacks │ onUpdate: () => {}, │ └─────────────────────┘ }); ``` **In this section** - [onBegin](https://animejs.com/documentation/timer/timer-callbacks/onbegin "onBegin") - [onComplete](https://animejs.com/documentation/timer/timer-callbacks/oncomplete "onComplete") - [onUpdate](https://animejs.com/documentation/timer/timer-callbacks/onupdate "onUpdate") - [onLoop](https://animejs.com/documentation/timer/timer-callbacks/onloop "onLoop") - [onPause](https://animejs.com/documentation/timer/timer-callbacks/onpause "onPause") - [then()](https://animejs.com/documentation/timer/timer-callbacks/then "then()") **Previous** **Next** - [Timer playback settings](https://animejs.com/documentation/timer/timer-playback-settings "Timer playback settings") - [onBegin](https://animejs.com/documentation/timer/timer-callbacks/onbegin "onBegin") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Utility Function for Targets $() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [$() V4](https://animejs.com/documentation/utilities/dollar-sign "$()") Converts the provided targets parameter into an `Array` of elements, serving as an alternative to `document.querySelectorAll()`. When used within a [Scope](https://animejs.com/documentation/scope), it uses the Scope's `root` element instead of `document`, effectively calling `root.querySelectorAll()`. ```js hljs language-javascript const targetsArray = utils.$(targets); ``` ## Parameters | Name | Accepts | | --- | --- | | targets | [CSS selector](https://animejs.com/documentation/animation/targets/css-selector "CSS selector") \| [DOM Elements](https://animejs.com/documentation/animation/targets/dom-elements "DOM Elements") | ## Returns An `Array` of `HTMLElement` or `SVGElement` or `SVGGeometryElement` ```hljs javascript import { utils, createScope } from 'animejs'; // Targets all the '.square' elements utils.$('.square').forEach($square => { utils.set($square, { scale: .5 }); }); createScope({ root: '.row:nth-child(2)' }).add(() => { // Limits the selection to '.row:nth-child(2) .square' utils.$('.square').forEach($square => { utils.set($square, { rotate: 45 }); }); }); ``` ```hljs html language-xml
``` **Previous** **Next** - [Utilities](https://animejs.com/documentation/utilities "Utilities") - [get()](https://animejs.com/documentation/utilities/get "get()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Number Mapping Utility mapRange() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [mapRange() V4](https://animejs.com/documentation/utilities/map-range "mapRange()") Maps a `Number` from one range to another or creates a mapping `Function` with pre-defined ranges parameters. ```js hljs language-javascript const mappedValue = utils.mapRange(value, fromLow, fromHigh, toLow, toHigh); const mapperFunction = utils.mapRange(fromLow, fromHigh, toLow, toHigh); ``` ## Parameters | Name | Accepts | | --- | --- | | value (opt) | `Number` | | fromLow | `Number` | | fromHigh | `Number` | | toLow | `Number` | | toHigh | `Number` | ## Returns A `Number` if a value is provided, otherwise a [chain-able utility](https://animejs.com/documentation/utilities/chain-able-utility-functions "chain-able utility") `Function` to map numbers from one range to another: ```js hljs language-javascript const mapFrom0and100to0and200 = utils.mapRange(0, 100, 0, 200); mapFrom0and100to0and200(45); // 90 mapFrom0and100to0and200(120); // 240 mapFrom0and100to0and200(-15); // -30 const normalizeAndClamp = utils.mapRange(-100, 100, 0, 1).clamp(0, 1); // Normalize then clamp between 0 and 1 normalizeAndClamp(50); // 0.75 normalizeAndClamp(120); // 1 ``` ```hljs javascript import { animate, utils } from 'animejs'; animate('.normal', { rotate: '12turn', duration: 12000, loop: true, ease: 'inOut', }); animate('.mapped', { rotate: '12turn', modifier: utils.mapRange(0, 12, 0, 1), // Used as a modifier duration: 12000, loop: true, ease: 'inOut', }); ``` ```hljs html language-xml
normal
mapped [0,12] [0,1]
``` **Previous** **Next** - [wrap()](https://animejs.com/documentation/utilities/wrap "wrap()") - [interpolate()](https://animejs.com/documentation/utilities/interpolate "interpolate()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## ScrollObserver Callbacks ScrollObserver callbacks Search [ScrollObserver](https://animejs.com/documentation/scroll "ScrollObserver") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [ScrollObserver callbacks](https://animejs.com/documentation/scroll/scrollobserver-callbacks "ScrollObserver callbacks") Triggers functions at specific points during scroll. ScrollObservers callbacks functions are defined directly in the `onScroll()` parameters `Object`. ```js hljs language-javascript animate('.square', { x: 100, autoplay: onScroll({ container: '.container', target: '.section', axis: 'y', enter: 'bottom top', leave: 'top bottom', sync: true, ┌──────────────────────────┐ │ onEnter: () => {}, │ │ onLeave: () => {}, ├─ Callbacks │ onUpdate: () => {}, │ └──────────────────────────┘ }) }); ``` **In this section** - [onEnter](https://animejs.com/documentation/scroll/scrollobserver-callbacks/onenter "onEnter") - [onEnterForward](https://animejs.com/documentation/scroll/scrollobserver-callbacks/onenterforward "onEnterForward") - [onEnterBackward](https://animejs.com/documentation/scroll/scrollobserver-callbacks/onenterbackward "onEnterBackward") - [onLeave](https://animejs.com/documentation/scroll/scrollobserver-callbacks/onleave "onLeave") - [onLeaveForward](https://animejs.com/documentation/scroll/scrollobserver-callbacks/onleaveforward "onLeaveForward") - [onLeaveBackward](https://animejs.com/documentation/scroll/scrollobserver-callbacks/onleavebackward "onLeaveBackward") - [onUpdate](https://animejs.com/documentation/scroll/scrollobserver-callbacks/onupdate "onUpdate") - [onSyncComplete](https://animejs.com/documentation/scroll/scrollobserver-callbacks/onsynccomplete "onSyncComplete") **Previous** **Next** - [ScrollObserver synchronisation modes](https://animejs.com/documentation/scroll/scrollobserver-synchronisation-modes "ScrollObserver synchronisation modes") - [onEnter](https://animejs.com/documentation/scroll/scrollobserver-callbacks/onenter "onEnter") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## ScrollObserver Thresholds ScrollObserver thresholds Search [ScrollObserver](https://animejs.com/documentation/scroll "ScrollObserver") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [ScrollObserver thresholds](https://animejs.com/documentation/scroll/scrollobserver-thresholds "ScrollObserver thresholds") Determines the points at which actions are triggered based on the scrolling position of a target element within a container. Thresholds are defined with the `enter` and `leave` properties of the `onScroll()` parameters `Object`. ```js hljs language-javascript animate('.square', { x: 100, autoplay: onScroll({ container: '.container', target: '.section', axis: 'y', ┌──────────────────────────┐ │ enter: 'bottom top', ├─ Thresholds │ leave: 'top bottom', │ └──────────────────────────┘ sync: true, onEnter: () => {}, onLeave: () => {}, onUpdate: () => {}, }) }); ``` The conditions that determine when an element enters or leaves the viewport are specified by comparing two pairs of values: the target and container `start` and `end` values. ```js hljs language-javascript ┌────────────────────────────────┐- Container Start │ │ │ Container │ │ │ │ ┌──────────┐----------│- Target Start │ │ │ │ │ │ Target │ │ └────────────────────────────────┘- Container End │ │ └──────────┘------------ Target End ``` ## Different syntaxes Conditions can be written with the following syntaxes: ### Object ```js hljs language-javascript onScroll({ // Enters when the top of the target meets the bottom of the container enter: { target: 'top', container: 'bottom' }, // Leaves when the bottom of the target meets the top of the container leave: { target: 'bottom', container: 'top' } }); ``` ### Container value String The container value can be passed directly and the target value defaults to `'start'` for enter and `'end'` for leave. ```js hljs language-javascript onScroll({ // Enters when the top of the target meets the bottom of the container enter: 'bottom', // Leaves when the bottom of the target meets the top of the container leave: 'top' }); ``` ### Container and target value shorthand String ```js hljs language-javascript onScroll({ // Enters when the bottom of the container meets the top of the target enter: 'bottom top', // Leaves when the top of the container meets the bottom of the target leave: 'top bottom', }); ``` ## Default enter `'end start'` ## Default leave `'start end'` **In this section** - [Numeric values](https://animejs.com/documentation/scroll/scrollobserver-thresholds/numeric-values "Numeric values") - [Positions shorthands](https://animejs.com/documentation/scroll/scrollobserver-thresholds/positions-shorthands "Positions shorthands") - [Relative position values](https://animejs.com/documentation/scroll/scrollobserver-thresholds/relative-position-values "Relative position values") - [Min max](https://animejs.com/documentation/scroll/scrollobserver-thresholds/min-max "Min max") **Previous** **Next** - [ScrollObserver settings](https://animejs.com/documentation/scroll/scrollobserver-settings "ScrollObserver settings") - [Numeric values](https://animejs.com/documentation/scroll/scrollobserver-thresholds/numeric-values "Numeric values") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Engine Parameters Engine parameters Search [Engine](https://animejs.com/documentation/engine "Engine") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Engine parameters](https://animejs.com/documentation/engine/engine-parameters "Engine parameters") ```js hljs language-javascript import { engine } from 'animejs'; ┌────────────┐ engine.│speed │ engine.│fps ├─ Parameters engine.│precision │ └────────────┘ ``` **In this section** - [timeUnit](https://animejs.com/documentation/engine/engine-parameters/timeunit-seconds-milliseconds "timeUnit (seconds / milliseconds)") - [speed](https://animejs.com/documentation/engine/engine-parameters/speed "speed") - [fps](https://animejs.com/documentation/engine/engine-parameters/fps "fps") - [precision](https://animejs.com/documentation/engine/engine-parameters/precision "precision") - [pauseOnDocumentHidden](https://animejs.com/documentation/engine/engine-parameters/pauseondocumenthidden "pauseOnDocumentHidden") **Previous** **Next** - [Engine](https://animejs.com/documentation/engine "Engine") - [timeUnit (seconds / milliseconds)](https://animejs.com/documentation/engine/engine-parameters/timeunit-seconds-milliseconds "timeUnit (seconds / milliseconds)") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Timeline Methods Timeline methods Search [Timeline](https://animejs.com/documentation/timeline "Timeline") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) # [Timeline methods](https://animejs.com/documentation/timeline/timeline-methods "Timeline methods") Provide control over the timing, behaviour and progression of a timeline. Timeline methods are available on a Timeline instance `Object`. ```js hljs language-javascript const timeline = createTimeline(parameters); ┌──────────┐ timeline.│pause() │ timeline.│play() ├─ Methods timeline.│restart() │ └──────────┘ ``` **In this section** - [add()](https://animejs.com/documentation/timeline/timeline-methods/add "add()") - [set()](https://animejs.com/documentation/timeline/timeline-methods/set "set()") - [sync()](https://animejs.com/documentation/timeline/timeline-methods/sync "sync()") - [label()](https://animejs.com/documentation/timeline/timeline-methods/label "label()") - [remove()](https://animejs.com/documentation/timeline/timeline-methods/remove "remove()") - [call()](https://animejs.com/documentation/timeline/timeline-methods/call "call()") - [init()](https://animejs.com/documentation/timeline/timeline-methods/init "init()") - [play()](https://animejs.com/documentation/timeline/timeline-methods/play "play()") - [reverse()](https://animejs.com/documentation/timeline/timeline-methods/reverse "reverse()") - [pause()](https://animejs.com/documentation/timeline/timeline-methods/pause "pause()") - [restart()](https://animejs.com/documentation/timeline/timeline-methods/restart "restart()") - [alternate()](https://animejs.com/documentation/timeline/timeline-methods/alternate "alternate()") - [resume()](https://animejs.com/documentation/timeline/timeline-methods/resume "resume()") - [complete()](https://animejs.com/documentation/timeline/timeline-methods/complete "complete()") - [cancel()](https://animejs.com/documentation/timeline/timeline-methods/cancel "cancel()") - [revert()](https://animejs.com/documentation/timeline/timeline-methods/revert "revert()") - [seek()](https://animejs.com/documentation/timeline/timeline-methods/seek "seek()") - [stretch()](https://animejs.com/documentation/timeline/timeline-methods/stretch "stretch()") - [refresh()](https://animejs.com/documentation/timeline/timeline-methods/refresh "refresh()") **Previous** **Next** - [Timeline callbacks](https://animejs.com/documentation/timeline/timeline-callbacks "Timeline callbacks") - [add()](https://animejs.com/documentation/timeline/timeline-methods/add "add()") ## Timer Properties Timer properties Search [Timer](https://animejs.com/documentation/timer "Timer") # [Timer properties](https://animejs.com/documentation/timer/timer-properties "Timer properties") ```js hljs language-javascript 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](https://animejs.com/documentation/timer/timer-methods "Timer methods") - [Animation](https://animejs.com/documentation/animation "Animation") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Draggable Methods Overview Draggable methods Search [Draggable](https://animejs.com/documentation/draggable "Draggable") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Draggable methods](https://animejs.com/documentation/draggable/draggable-methods "Draggable methods") Controls the state and behaviour of a draggable. Draggable methods are accessible through a Draggable instance `Object`. ```js hljs language-javascript const draggable = createDraggable(target, parameters); ┌──────────┐ draggable.│disable() │ draggable.│enable() ├─ Methods draggable.│revert() │ └──────────┘ ``` **In this section** - [disable()](https://animejs.com/documentation/draggable/draggable-methods/disable "disable()") - [enable()](https://animejs.com/documentation/draggable/draggable-methods/enable "enable()") - [setX()](https://animejs.com/documentation/draggable/draggable-methods/setx "setX()") - [setY()](https://animejs.com/documentation/draggable/draggable-methods/sety "setY()") - [animateInView()](https://animejs.com/documentation/draggable/draggable-methods/animateinview "animateInView()") - [scrollInView()](https://animejs.com/documentation/draggable/draggable-methods/scrollinview "scrollInView()") - [stop()](https://animejs.com/documentation/draggable/draggable-methods/stop "stop()") - [reset()](https://animejs.com/documentation/draggable/draggable-methods/reset "reset()") - [revert()](https://animejs.com/documentation/draggable/draggable-methods/revert "revert()") - [refresh()](https://animejs.com/documentation/draggable/draggable-methods/refresh "refresh()") **Previous** **Next** - [Draggable callbacks](https://animejs.com/documentation/draggable/draggable-callbacks "Draggable callbacks") - [disable()](https://animejs.com/documentation/draggable/draggable-methods/disable "disable()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Animatable Settings Animatable settings Search [Animatable](https://animejs.com/documentation/animatable "Animatable") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Animatable settings](https://animejs.com/documentation/animatable/animatable-settings "Animatable settings") Animatables properties settings are specified globally to all properties on the parameters object, or specifically to a property by passing an object. ```js hljs language-javascript createAnimatable(targets, { x: { ┌──────────────────┐ │ unit: 'rem', │ │ duration: 400, ├─ Specific Property Settings │ ease: 'out(4)' │ └──────────────────┘ }, y: 200, rotate: 1000, ┌──────────────────┐ │ ease: 'out(2)', ├─ Global Properties Settings └──────────────────┘ }); ``` **In this section** - [unit](https://animejs.com/documentation/animatable/animatable-settings/unit "unit") - [duration](https://animejs.com/documentation/animatable/animatable-settings/duration "duration") - [ease](https://animejs.com/documentation/animatable/animatable-settings/ease "ease") - [modifier](https://animejs.com/documentation/animatable/animatable-settings/modifier "modifier") **Previous** **Next** - [Animatable](https://animejs.com/documentation/animatable "Animatable") - [unit](https://animejs.com/documentation/animatable/animatable-settings/unit "unit") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Time Position Time position Search [Timeline](https://animejs.com/documentation/timeline "Timeline") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) # [Time position](https://animejs.com/documentation/timeline/time-position "Time position") Specifies the time at which a timeline child is inserted into a timeline. If no position is defined, the child will be positioned at the end of the timeline. The time position is defined as the last parameter of the following methods: ```js hljs language-javascript timeline.add(target, animationParameters, position); timeline.add(timerParameters, position); timeline.call(callbackFunction, position); timeline.sync(labelName, position); timeline.label(labelName, position); ``` ## Time position types | Type | Example | Description | | --- | --- | --- | | Absolute | `500` | Position the element at exactly 100ms in the timeline | | Addition | `'+=100'` | Position the element 100ms after the last element | | Subtraction | `'-=100'` | Position the element 100ms before the last element end | | Multiplier | `'*=.5'` | Position the element at half of the total element duration | | Previous end
position | `'<'` | Position the element at the end position of the previous element | | Previous start
position | `'<<'` | Position the element at the start position of the previous element | | Combined | `'<<+=250'` | Position the element 250ms after the beginning position of the previous element | | [Label](https://animejs.com/documentation/timeline/timeline-methods/label "Label") | `'My Label'` | Position the element at the `'My Label'` element | | [Stagger](https://animejs.com/documentation/stagger "Stagger") | `stagger(10)` | Stagger the elements position by `10` | ```hljs javascript import { createTimeline } from 'animejs'; const tl = createTimeline() .label('start', 0) .add('.square', { x: '15rem', duration: 500, }, 500) .add('.circle', { x: '15rem', duration: 500, }, 'start') .add('.triangle', { x: '15rem', rotate: '1turn', duration: 500, }, '<-=250'); ``` ```hljs html language-xml
``` **Previous** **Next** - [Call functions](https://animejs.com/documentation/timeline/call-functions "Call functions") - [Timeline playback settings](https://animejs.com/documentation/timeline/timeline-playback-settings "Timeline playback settings") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js v3 Documentation ✕ This version is outdated. [Use Anime.js v4 instead](https://animejs.com/) ### CSS Selector Can be any CSS selector. Pseudo elements can't be targeted using JavaScript. | Type | Default | Example | | --- | --- | --- | | String | `null` | `targets: '.item'` | ### DOM Node / NodeList Can be any DOM Node or NodeList. | Type | Default | Example | | --- | --- | --- | | DOM Node | `null` | `targets: el.querySelector('.item')` | | NodeList | `null` | `targets: el.querySelectorAll('.item')` | ### JavaScript Object A JavaScript Object with at least one property containing a numerical value. | Type | Default | Example | | --- | --- | --- | | Object | `null` | `targets: myObjectProp` | ``` {"charged":"0%","cycles":120} ``` ### Array An array containing multiple targets. Accepts mixed types. E.g. `['.el', domNode, jsObject]` | Type | Default | Example | | --- | --- | --- | | Array | `null` | `targets: ['.item', el.getElementById('#thing')]` | ### CSS Properties Any CSS properties can be animated. Most CSS properties will cause layout changes or repaint, and will result in choppy animation. Prioritize opacity and CSS transforms as much as possible. More details about accepted values in the [values](https://animejs.com/v3/documentation/#unitlessValue) section. | Example | value | | --- | --- | | `opacity` | `.5` | | `left` | `'100px'` | ### CSS Transforms Animate CSS transforms properties individually. It's possible to specify different timing for each transforms properties, more details in the [specific property parameters](https://animejs.com/v3/documentation/#specificPropParameters) section. More details about accepted values in the [values](https://animejs.com/v3/documentation/#unitlessValue) section. | Valid properties | Default unit | | --- | --- | | `'translateX'` | `'px'` | | `'translateY'` | `'px'` | | `'translateZ'` | `'px'` | | `'rotate'` | `'deg'` | | `'rotateX'` | `'deg'` | | `'rotateY'` | `'deg'` | | `'rotateZ'` | `'deg'` | | `'scale'` | `—` | | `'scaleX'` | `—` | | `'scaleY'` | `—` | | `'scaleZ'` | `—` | | `'skew'` | `'deg'` | | `'skewX'` | `'deg'` | | `'skewY'` | `'deg'` | | `'perspective'` | `'px'` | ### Object properties Any Object property containing a numerical value can be animated. More details about accepted values in the [values](https://animejs.com/v3/documentation/#unitlessValue) section. | Example | value | | --- | --- | | `prop1` | `50` | | `'prop2'` | `'100%'` | ``` {"prop1":0,"prop2":"0%"} ``` ### DOM Attributes Any DOM Attributes containing a numerical value can be animated. More details about accepted values in the [values](https://animejs.com/v3/documentation/#unitlessValue) section. | Example | value | | --- | --- | | `value` | `1000` | | `volume` | `0` | | `data-custom` | `'3 dogs'` | ### SVG Attributes Like any other [DOM attributes](https://animejs.com/v3/documentation/#domAttr), all SVG attributes containing at least one numerical value can be animated. More details about accepted values in the [values](https://animejs.com/v3/documentation/#unitlessValue) section and SVG animation in the [SVG](https://animejs.com/v3/documentation/#motionPath) section. | Example | value | | --- | --- | | `points` | `'64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100'` | | `scale` | `1` | | `baseFrequency` | `0` | ### Duration Defines the duration in milliseconds of the animation. | Type | Default | Example | | --- | --- | --- | | Number | `1000` | `3000` | | anime.stagger | See [staggering](https://animejs.com/v3/documentation/#staggeringBasics) section | `anime.stagger(150)` | | Function | See [function based parameters](https://animejs.com/v3/documentation/#functionBasedParameters) section | `(el, i) => i * 150` | 3000 ms ### Delay Defines the delay in milliseconds of the animation. | Type | Default | Example | | --- | --- | --- | | Number | `0` | `1000` | | anime.stagger | See [staggering](https://animejs.com/v3/documentation/#staggeringBasics) section | `anime.stagger(150)` | | Function | See [function based parameters](https://animejs.com/v3/documentation/#functionBasedParameters) section | `(el, i) => i * 150` | 1000 ms ### end delay Adds some extra time in milliseconds at the end of the animation. | Type | Default | Example | | --- | --- | --- | | Number | `0` | `1000` | | anime.stagger | See [staggering](https://animejs.com/v3/documentation/#staggeringBasics) section | `anime.stagger(150)` | | Function | See [function based parameters](https://animejs.com/v3/documentation/#functionBasedParameters) section | `(el, i) => i * 150` | 1000 ms ### Easing Defines the timing function of the animation. Check out the [easings](https://animejs.com/v3/documentation/#linearEasing) section for a complete list of available easing and parameters. | Type | Default | Example | | --- | --- | --- | | String | `'easeOutElastic(1, .5)'` | `easing: 'easeInOutQuad'` | easeInOutExpo ### Round Rounds up the value to x decimals. | Type | Default | Example | | --- | --- | --- | | Number | `0` | `round: 10` | ``` 0 ``` ### Specific property parameters Defines specific parameters to each property of the animation using an Object as value. Other properties that aren't specified in the Object are inheritted from the main animation. | Type | Example | | --- | --- | | Object | `rotate: {
value: 360,
duration: 1800,
easing: 'easeInOutSine'
}` | ### Function based parameters Get different values for every target and property of the animation. The function accepts 3 arguments: | Arguments | Infos | | --- | --- | | `target` | The curent animated targeted element | | `index` | The index of the animated targeted element | | `targetsLength` | The total number of animated targets | See [staggering](https://animejs.com/v3/documentation/#staggeringBasics) section for easier values manipulation. delay = 0 \* 100 delay = 1 \* 100 delay = 2 \* 100 ### Direction Defines the direction of the animation. | Accepts | Infos | | --- | --- | | `'normal'` | Animation progress goes from 0 to 100% | | `'reverse'` | Animation progress goes from 100% to 0% | | `'alternate'` | Animation progress goes from 0% to 100% then goes back to 0% | normal reverse alternate ### Loop Defines the number of iterations of your animation. | Accepts | Infos | | --- | --- | | `Number` | The number of iterations | | `true` | Loop indefinitely | normal 3 times reverse 3 times alternate 3 times normal inifinite inifinite reverse inifinite alternate ### Autoplay Defines if the animation should automatically starts or not. | Accepts | Infos | | --- | --- | | `true` | Automatically starts the animation | | `false` | Animation is paused by default | autoplay: true autoplay: false ### Unitless If the original value has a unit, it will be automatically added to the animated value. | Type | Example | | --- | --- | | Number | `translateX: 250` | ### Specific unit Forces the animation to use a certain unit and will automatically convert the initial target value. Conversion accuracy can vary depending of the unit used. You can also define the initial value of the animation directly using an array, see the [from to values](https://animejs.com/v3/documentation/#fromToValues) section. | Type | Example | | --- | --- | | String | `width: '100%'` | ### Relative Adds, substracts or multiplies the original value. | Accepts | Effect | Example | | --- | --- | --- | | `'+='` | Add | `'+=100'` | | `'-='` | Substract | `'-=2turn'` | | `'*='` | Multiply | `'*=10'` | ### Colors _anime.js_ accepts and converts Hexadecimal, RGB, RGBA, HSL, and HSLA color values. CSS color codes ( e.g. : `'red', 'yellow', 'aqua'` ) are not supported. | Accepts | Example | | --- | --- | | Hexadecimal | `'#FFF'` or `'#FFFFFF'` | | RGB | `'rgb(255, 255, 255)'` | | RGBA | `'rgba(255, 255, 255, .2)'` | | HSL | `'hsl(0, 100%, 100%)'` | | HSLA | `'hsla(0, 100%, 100%, .2)'` | HEX RGB HSL RGBA HSLA ### From To Forces the animation to start at a specified value. | Type | Example | | --- | --- | | `Array` | `['50%', '100%']` | ### Function based values Get different values for every target and property of the animation. The function accepts 3 arguments: | Arguments | Infos | | --- | --- | | `target` | The curently animated targeted element | | `index` | The index of the animated targeted element | | `targetsLength` | The total number of animated targets | ### Animation keyframes Animation keyframes are defined using an Array, within the `keyframes` property. If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation's total duration divided by the number of keyframes. | Type | Example | | --- | --- | | `Array` | `[
{value: 100, easing: 'easeOutExpo'},
{value: 200, delay: 500},
{value: 300, duration: 1000}
]` | ### Property keyframes Similar to [animation keyframes](https://animejs.com/v3/documentation/#animationKeyframes), property keyframes are defined using an Array of property Object. Property keyframes allow overlapping animations since each property have its own keyframes array. If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation's total duration divided by the number of keyframes. | Type | Example | | --- | --- | | `Array` | `[
{value: 100, easing: 'easeOutExpo'},
{value: 200, delay: 500},
{value: 300, duration: 1000}
]` | ### Staggering basics Staggering allows you to animate multiple elements with [follow through and overlapping action](https://en.wikipedia.org/wiki/Follow_through_and_overlapping_action). ``` anime.stagger(value, options) ``` | Arguments | Type | Info | Required | | --- | --- | --- | --- | | Value | `Number`, `String`, `Array` | The manipulated value(s) | Yes | | Options | `Object` | Stagger parameters | No | delay = (100 \* 0) ms delay = (100 \* 1) ms delay = (100 \* 2) ms delay = (100 \* 3) ms delay = (100 \* 4) ms delay = (100 \* 5) ms ### Start value Starts the staggering effect from a specific value. ``` anime.stagger(value, {start: startValue}) ``` | Types | Info | | --- | --- | | `Number`, `String` | Same as propety values, see [values section](https://animejs.com/v3/documentation/#unitlessValue) | delay = 500 + (100 \* 0) ms delay = 500 + (100 \* 1) ms delay = 500 + (100 \* 2) ms delay = 500 + (100 \* 3) ms delay = 500 + (100 \* 4) ms delay = 500 + (100 \* 5) ms ### Range value Distributes evenly values between two numbers. ``` anime.stagger([startValue, endValue]) ``` | Type | Info | | --- | --- | | `'easingName'` | All valid easing names are accepted, see [easings section](https://animejs.com/v3/documentation/#easings) | | `function(i)` | Custom easing function, see [custom easings section](https://animejs.com/v3/documentation/#customEasing) | rotate = -360 + ((360 - (-360)) / 5) \* 0 rotate = -360 + ((360 - (-360)) / 5) \* 1 rotate = -360 + ((360 - (-360)) / 5) \* 2 rotate = -360 + ((360 - (-360)) / 5) \* 3 rotate = -360 + ((360 - (-360)) / 5) \* 4 rotate = -360 + ((360 - (-360)) / 5) \* 5 ### From value Starts the stagger effect from a specific position. ``` anime.stagger(value, {from: startingPosition}) ``` | Options | Type | Info | | --- | --- | --- | | `'first'` (default) | `'string'` | Start the effect from the first element | | `'last'` | `'string'` | Start the effect from the last element | | `'center'` | `'string'` | Start the effect from the center | | `index` | `number` | Start the effect from the specified index | ### Direction Changes the order in which the stagger operates. ``` anime.stagger(value, {direction: 'reverse'}) ``` | Options | Info | | --- | --- | | `'normal'` (default) | Normal staggering, from the first element to the last | | `'reverse'` | Reversed staggering, from the last element to the first | ### Easing Stagger values using an easing function. ``` anime.stagger(value, {easing: 'easingName'}) ``` | Type | Info | | --- | --- | | `'string'` | All valid [easing names](https://animejs.com/v3/documentation/#easings) are accepted | | `function(i)` | Use your own [custom easings function](https://animejs.com/v3/documentation/#customEasing) | ### Grid Staggering values based a 2D array that allow "ripple" effects. ``` anime.stagger(value, {grid: [rows, columns]}) ``` | Type | Info | | --- | --- | | `array` | A 2 items array, the first value is the number of rows, the second the number of columns | ### Axis Forces the direction of a [grid staggering](https://animejs.com/v3/documentation/gridStaggering) effect. ``` anime.stagger(value, {grid: [rows, columns], axis: 'x'}) ``` | Parameters | Info | | --- | --- | | `'x'` | Follows the x axis | | `'y'` | Follows the y axis | ### Timeline basics Timelines let you synchronise multiple animations together. By default each animation added to the timeline starts after the previous animation ends. Creating a timeline: ``` var myTimeline = anime.timeline(parameters); ``` | Argument | Type | Info | Required | | --- | --- | --- | --- | | `parameters` | `Object` | The default parameters of the timeline inherited by children | No | Adding animations to a timeline: ``` myTimeline.add(parameters, offset); ``` | Argument | Types | Info | Required | | --- | --- | --- | --- | | `parameters` | `Object` | The child animation parameters, override the timeline default parameters | Yes | | `time offset` | `String` or `Number` | Check out the [Timeline offsets](https://animejs.com/v3/documentation/#timelineOffsets) section | No | ### Time Offsets Time offsets can be specified with a second optional parameter using the timeline `.add()` function. It defines when a animation starts in the timeline, if no offset is specifed, the animation will starts after the previous animation ends. An offset can be relative to the last animation or absolute to the whole timeline. | Type | Offset | Example | Infos | | --- | --- | --- | --- | | String | `'+='` | `'+=200'` | Starts 200ms after the previous animation ends | | String | `'-='` | `'-=200'` | Starts 200ms before the previous animation ends | | Number | `Number` | `100` | Starts at 100ms, reagardless of the animtion position in the timeline | no offset relative offset ('-=600') absolute offset (400) ### Parameters inheritance Some parameters set in the parent timeline instance can be inherited by all the children. | Parameters that can be inherited | | --- | | `targets` | | `easing` | | `duration` | | `delay` | | `endDelay` | | `round` | ### Play / Pause Plays a paused animation, or starts the animation if the `autoplay` parameters is set to `false`. ``` animation.play(); ``` Pauses a running animation. ``` animation.pause(); ``` PlayPause ### Restart Restarts an animation from its initial values. ``` animation.restart(); ``` Restart ### Reverse Reverses the direction of an animation. ``` animation.reverse(); ``` Reverse ### Seek Jump to a specific time (in milliseconds). ``` animation.seek(timeStamp); ``` Can also be used to control an animation while scrolling. ``` animation.seek((scrollPercent / 100) * animation.duration); ``` ### Timeline controls Timelines can be controled like any other _anime.js_ instance. ``` timeline.play(); timeline.pause(); timeline.restart(); timeline.seek(timeStamp); ``` PlayPauseRestart ### Update Callback triggered on every frame as soon as the animation starts playing. | Type | Parameters | Info | | --- | --- | --- | | Function | animation | Return the current animation Object | ### Begin & Complete `begin()` callback is triggered once, when the animation starts playing. `complete()` callback is triggered once, when the animation is completed. Both `begin()` and `complete()` callbacks are called if the animation's `duration` is `0`. | Type | Parameters | Info | | --- | --- | --- | | Function | animation | Return the current animation Object | ### loopBegin & loopComplete `loopBegin()` callback is triggered once everytime a loop begin. `loopComplete()` callback is triggered once everytime a loop is completed. | Type | Parameters | Info | | --- | --- | --- | | Function | animation | Return the current animation Object | ### Change Callback triggered on every frames in between the animation's [delay](https://animejs.com/v3/documentation/#delay) and [endDelay](https://animejs.com/v3/documentation/#endDelay). | Type | Parameters | Info | | --- | --- | --- | | Function | animation | Return the current animation Object | ### changeBegin & changeComplete `changeBegin()` callback is triggered everytime the animation starts changing. `changeComplete()` callback is triggered everytime the animation stops changing. Animation direction will affect the order in which `changeBegin()` and `changeComplete()` are triggerd. | Type | Parameters | Info | | --- | --- | --- | | Function | animation | Return the current animation Object | ### Finished promise Every animation instances return a `finished` promise when the animation finised. ``` animation.finished.then(function() { // Do things... }); ``` Promises are not suported in IE < 11. ### Motion path Animates an element relative to the `x`, `y` and `angle` values of an SVG path element. ``` var myPath = anime.path('svg path'); ``` The path function returns a new Function that returns the specified property. Motion path animations are responsive since v3 | Parameters | Example | Info | | --- | --- | --- | | `'x'` | `myPath('x')` | Return the current x value in `'px'` of the SVG path | | `'y'` | `myPath('y')` | Return the current y value in `'px'` of the SVG path | | `'angle'` | `myPath('angle')` | Return the current angle value in `'degrees'` of the SVG path | ### Morphing Creates transition between two svg shapes. Shapes must have the same number of points! More info on SVG shape morphing [here](https://hackernoon.com/metamorphosis-morphing-svgs-378cf4f3aa58). ### Line drawing Creates path drawing animation using the `'stroke-dashoffset'` property. Set the path `'dash-offset'` value with `anime.setDashoffset()` in a [from to](https://animejs.com/v3/documentation/#fromToValues) formated value. ``` strokeDashoffset: [anime.setDashoffset, 0] ``` More info on line drawing animation [here](https://css-tricks.com/svg-line-animation-works/). ### Linear Does not apply any easing timing to your animation. Usefull for opacity and colors transitions. ``` easing: 'linear' ``` ### Penner's functions Built-in [Robert Penner's easing functions](http://robertpenner.com/easing/). See easings in action on [easings.net](https://easings.net/). ``` easing: 'easeInOutSine' ``` Availabe easings : | in | out | in-out | out-in | | --- | --- | --- | --- | | `'easeInQuad'` | `'easeOutQuad'` | `'easeInOutQuad'` | `'easeOutInQuad'` | | `'easeInCubic'` | `'easeOutCubic'` | `'easeInOutCubic'` | `'easeOutInCubic'` | | `'easeInQuart'` | `'easeOutQuart'` | `'easeInOutQuart'` | `'easeOutInQuart'` | | `'easeInQuint'` | `'easeOutQuint'` | `'easeInOutQuint'` | `'easeOutInQuint'` | | `'easeInSine'` | `'easeOutSine'` | `'easeInOutSine'` | `'easeOutInSine'` | | `'easeInExpo'` | `'easeOutExpo'` | `'easeInOutExpo'` | `'easeOutInExpo'` | | `'easeInCirc'` | `'easeOutCirc'` | `'easeInOutCirc'` | `'easeOutInCirc'` | | `'easeInBack'` | `'easeOutBack'` | `'easeInOutBack'` | `'easeOutInBack'` | | `'easeInBounce'` | `'easeOutBounce'` | `'easeInOutBounce'` | `'easeOutInBounce'` | ### Cubic Bézier Curve Use your own custom cubic Bézier curves `cubicBezier(x1, y1, x2, y2)`. ``` easing: 'cubicBezier(.5, .05, .1, .3)' ``` You can use Bézier curves generator like [Ceaser to generate your curves coordinates](https://matthewlein.com/tools/ceaser). ### Spring Spring physics based easing. ``` easing: 'spring(mass, stiffness, damping, velocity)' ``` The duration of a spring animation is defined by the spring parameters. The animation `duration` parameter will not be taken into account. | Parameter | Default | Min | Max | | --- | --- | --- | --- | | Mass | `1` | `0` | `100` | | Stiffness | `100` | `0` | `100` | | Damping | `10` | `0` | `100` | | Velocity | `0` | `0` | `100` | ### Elastic Elastic easing. ``` easing: 'easeOutElastic(amplitude, period)' ``` | in | out | in-out | out-in | | --- | --- | --- | --- | | `'easeInElastic'` | `'easeOutElastic'` | `'easeInOutElastic'` | `'easeOutInElastic'` | | Parameter | Default | Min | Max | Info | | --- | --- | --- | --- | --- | | Amplitude | `1` | `1` | `10` | Controls the overshoot of the curve. The larger this number, the more overshoot there is. | | Period | `.5` | `0.1` | `2` | Controls how many times the curve goes back and forth. The smaller this number, the more times the curtain goes back and forth. | ### Steps Defines the number of jumps an animation takes to arrive at its end value. ``` easing: 'steps(numberOfSteps)' ``` | Parameter | Default | Min | Max | | --- | --- | --- | --- | | Number of steps | `10` | `1` | `∞` | ### Custom easing function A custom easing function must be returned by [function based value](https://animejs.com/v3/documentation/#functionBasedPropVal). ``` easing: function() { return function(time) { return time * i} } ``` | Parameter | Info | | --- | --- | | Time | Return the current time of the animation | ### remove Removes targets from a running animation or timeline. The `targets` parameters accepts the same values as the [targets](https://animejs.com/v3/documentation/#cssSelector) property. Removes targets from all active animations. ``` anime.remove(targets); ``` Removes targets from a single animation or timeline. ``` animation.remove(targets); ``` Remove second target ### get Returns the original value of an element. ``` anime.get(target, propertyName, unit); ``` Since _anime.js_ uses [getComputedStyle](https://developer.mozilla.org/fr/docs/Web/API/Window/getComputedStyle) to access original CSS, the values are almost always returned in `'px'`, the third (optional) argument converts the value in the desired unit. ``` anime.get(domNode, 'width', 'rem'); ``` | Parameter | Type | Info | | --- | --- | --- | | target | `'string'`, `var` | Any valid [targets](https://animejs.com/v3/documentation/#cssSelector) can be used | CSS transforms : Only inlined values can be accessed. ### set Immediately sets values to the specified targets. ``` anime.set(targets, {property: value}); ``` | Parameters | Types | Info | | --- | --- | --- | | target(s) | `'string'`, `var` | Any valid [targets](https://animejs.com/v3/documentation/#cssSelector) can be used | | values | `object` | Any valid [properties](https://animejs.com/v3/documentation/#cssProperties) can be used | ### random Returns a random integer within a specific range. ``` anime.random(minValue, maxValue); ``` ### tick Plays an animation using an external `requestAnimationFrame` loop. ``` animation.tick(time) ``` Don't forget to set the `autoplay` parameter to `false` to prevent the _anime.js_ built-in RAF loop to start. ### running Returns an Array of all active _anime.js_ instances currently running. ``` anime.running ``` ### Suspend on visibility change ``` anime.suspendWhenDocumentHidden = false; // default true ``` By default all animations are paused when switching tabs, useful if you want to make sure the user sees everything and doesn't miss an important part of your animation. But you can choose to let the animation runs normally without any pause, like a video or an audio track that can continuously plays in the background. truefalse Can be any CSS selector. Pseudo elements can't be targeted using JavaScript. | Type | Default | Example | | --- | --- | --- | | String | `null` | `targets: '.item'` | ## Code example ```hljs javascript anime({ targets: '.css-selector-demo .el', translateX: 250 }); ``` [![](https://animejs.com/v3/documentation/assets/sponsors/huly-logomark.svg)Huly](https://huly.io/?ref=animejs) [![](https://animejs.com/v3/documentation/assets/sponsors/clutch-logomark.svg)Clutch](https://clutch.io/?ref=animejs) [![](https://animejs.com/v3/documentation/assets/img/sponsor-logo.png)Your logo here](https://github.com/sponsors/juliangarnier) ## ScrollObserver Settings ScrollObserver settings Search [ScrollObserver](https://animejs.com/documentation/scroll "ScrollObserver") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [ScrollObserver settings](https://animejs.com/documentation/scroll/scrollobserver-settings "ScrollObserver settings") ScrollObserver settings properties are defined directly in the `onScroll()` parameters `Object`. ```js hljs language-javascript animate('.square', { x: 100, autoplay: onScroll({ ┌──────────────────────────┐ │ container: '.container', │ │ target: '.section', ├─ Settings │ axis: 'y', │ └──────────────────────────┘ enter: 'bottom top', leave: 'top bottom', sync: true, onEnter: () => {}, onLeave: () => {}, onUpdate: () => {}, }) }); ``` **In this section** - [container](https://animejs.com/documentation/scroll/scrollobserver-settings/container "container") - [target](https://animejs.com/documentation/scroll/scrollobserver-settings/target "target") - [debug](https://animejs.com/documentation/scroll/scrollobserver-settings/debug "debug") - [axis](https://animejs.com/documentation/scroll/scrollobserver-settings/axis "axis") - [repeat](https://animejs.com/documentation/scroll/scrollobserver-settings/repeat "repeat") **Previous** **Next** - [ScrollObserver](https://animejs.com/documentation/scroll "ScrollObserver") - [container](https://animejs.com/documentation/scroll/scrollobserver-settings/container "container") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Animation Callbacks Guide Animation callbacks Search [Animation](https://animejs.com/documentation/animation "Animation") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) # [Animation callbacks](https://animejs.com/documentation/animation/animation-callbacks "Animation callbacks") Execute functions at specific points during an animation playback. Callbacks `Function` are specified directly in the `animate()` parameters `Object`. ```js hljs language-javascript animate('.square', { translateX: 100, scale: 2, opacity: .5, duration: 400, delay: 250, ease: 'out(3)', loop: 3, alternate: true, autoplay: false, ┌─────────────────────┐ │ onBegin: () => {}, │ │ onLoop: () => {}, ├─ Callbacks │ onUpdate: () => {}, │ └─────────────────────┘ }); ``` **In this section** - [onBegin](https://animejs.com/documentation/animation/animation-callbacks/onbegin "onBegin") - [onComplete](https://animejs.com/documentation/animation/animation-callbacks/oncomplete "onComplete") - [onBeforeUpdate](https://animejs.com/documentation/animation/animation-callbacks/onbeforeupdate "onBeforeUpdate") - [onUpdate](https://animejs.com/documentation/animation/animation-callbacks/onupdate "onUpdate") - [onRender](https://animejs.com/documentation/animation/animation-callbacks/onrender "onRender") - [onLoop](https://animejs.com/documentation/animation/animation-callbacks/onloop "onLoop") - [onPause](https://animejs.com/documentation/animation/animation-callbacks/onpause "onPause") - [then()](https://animejs.com/documentation/animation/animation-callbacks/then "then()") **Previous** **Next** - [Animation playback settings](https://animejs.com/documentation/animation/animation-playback-settings "Animation playback settings") - [onBegin](https://animejs.com/documentation/animation/animation-callbacks/onbegin "onBegin") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Tween Parameters Guide Tween parameters Search [Animation](https://animejs.com/documentation/animation "Animation") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) # [Tween parameters](https://animejs.com/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. ```js hljs language-javascript 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](https://animejs.com/documentation/animation/tween-parameters/to "to") - [from](https://animejs.com/documentation/animation/tween-parameters/from "from") - [delay](https://animejs.com/documentation/animation/tween-parameters/delay "delay") - [duration](https://animejs.com/documentation/animation/tween-parameters/duration "duration") - [ease](https://animejs.com/documentation/animation/tween-parameters/ease "ease") - [composition](https://animejs.com/documentation/animation/tween-parameters/composition "composition") - [modifier](https://animejs.com/documentation/animation/tween-parameters/modifier "modifier") **Previous** **Next** - [Tween value types](https://animejs.com/documentation/animation/tween-value-types "Tween value types") - [to](https://animejs.com/documentation/animation/tween-parameters/to "to") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Sync Timelines Sync timelines Search [Timeline](https://animejs.com/documentation/timeline "Timeline") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Sync timelines V4](https://animejs.com/documentation/timeline/sync-timelines "Sync timelines") Timelines can be synchronised to an other timeline using the [`sync()`](https://animejs.com/documentation/timeline/timeline-methods/sync "sync()") method. ```js hljs language-javascript timelineA.sync(timelineB, position); ``` ### Parameters | Name | Accepts | | --- | --- | | synced | [Animation](https://animejs.com/documentation/animation "Animation") \| [Timer](https://animejs.com/documentation/timer "Timer") \| [Timeline](https://animejs.com/documentation/timeline "Timeline") | | position (opt) | [Time position](https://animejs.com/documentation/timeline/time-position "Time position") | ## Returns The timeline itself Can be chained with other timeline methods. ```hljs javascript import { createTimeline, animate } from 'animejs'; const circleAnimation = animate('.circle', { x: '15rem' }); const tlA = createTimeline() .sync(circleAnimation) .add('.triangle', { x: '15rem', duration: 2000, }) .add('.square', { x: '15rem', }); const tlB = createTimeline({ defaults: { duration: 2000 } }) .add(['.triangle', '.square'], { rotate: 360, }, 0) .add('.circle', { scale: [1, 1.5, 1], }, 0); const tlMain = createTimeline() .sync(tlA) .sync(tlB, '-=2000'); ``` ```hljs html language-xml
``` **Previous** **Next** - [Sync WAAPI animations](https://animejs.com/documentation/timeline/sync-waapi-animations "Sync WAAPI animations") - [Call functions](https://animejs.com/documentation/timeline/call-functions "Call functions") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Engine Defaults Engine defaults Search [Engine](https://animejs.com/documentation/engine "Engine") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Engine defaults](https://animejs.com/documentation/engine/engine-defaults "Engine defaults") Defines the global defaults properties used by all [Timer](https://animejs.com/documentation/timer "Timer"), [Animation](https://animejs.com/documentation/animation "Animation") and [Timeline](https://animejs.com/documentation/timeline "Timeline") instances. All default properties are available on the `defaults` `Object` of `engine`. ```hljs javascript import { engine } from 'animejs'; engine.engine.defaults.duration = 500; ``` | Name | Accepts | | --- | --- | | playbackEase | Easing name `String` \| Easing `Function` | | playbackRate | `Number` | | frameRate | `Number` | | loop | `Number` \| `Boolean` | | reversed | `Boolean` | | alternate | `Boolean` | | autoplay | `Boolean` | | duration | `Number` \| `Function` | | delay | `Number` \| `Function` | | composition | Composition types `String` \| `Function` | | ease | Easing name `String` \| Easing `Function` | | loopDelay | `Number` | | modifier | Modifier `Function` | | onBegin | Callback `Function` | | onUpdate | Callback `Function` | | onRender | Callback `Function` | | onLoop | Callback `Function` | | onComplete | Callback `Function` | | onPause | Callback `Function` | **Previous** - [Engine properties](https://animejs.com/documentation/engine/engine-properties "Engine properties") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Animation Properties Overview Animation properties Search [Animation](https://animejs.com/documentation/animation "Animation") # [Animation properties](https://animejs.com/documentation/animation/animation-properties "Animation properties") ```js hljs language-javascript const animation = animate(targets, parameters); ┌────────────┐ animation.│targets │ animation.│currentTime ├─ Properties animation.│duration │ └────────────┘ ``` | Name | Description | | --- | --- | | id JS | Gets and sets the ID of the animation ( `String` \| `Number`) | | targets | Gets the current animation targets ( `Array`) | | currentTime | Gets and sets the global current time in ms of the animation ( `Number`) | | iterationCurrentTime JS | Gets and sets the current iteration time in ms ( `Number`) | | deltaTime JS | Gets the time in ms elapsed between the current and previous frame ( `Number`) | | progress | Gets and sets the overall progress of the animation from `0` to `1` ( `Number`) | | iterationProgress JS | Gets and sets the progress of the current iteration from `0` to `1` ( `Number`) | | currentIteration JS | Gets and sets the current iteration count ( `Number`) | | duration | Gets the total duration in ms of the animation ( `Number`) | | speed | Gets and sets the speed multiplier of the animation ( `Number`) | | fps JS | Gets and sets the fps of the animation ( `Number`) | | paused | Gets and sets whether the animation is paused ( `Boolean`) | | began JS | Gets and sets whether the animation has started ( `Boolean`) | | completed | Gets and sets whether the animation has completed ( `Boolean`) | | reversed JS | Gets and sets whether the animation is reversed ( `Boolean`) | **Previous** **Next** - [Animation methods](https://animejs.com/documentation/animation/animation-methods "Animation methods") - [Timeline](https://animejs.com/documentation/timeline "Timeline") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Engine Methods Engine methods Search [Engine](https://animejs.com/documentation/engine "Engine") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Engine methods](https://animejs.com/documentation/engine/engine-methods "Engine methods") ```js hljs language-javascript import { engine } from 'animejs'; ┌──────────┐ engine.│update() │ engine.│pause() ├─ Methods engine.│resume() │ └──────────┘ ``` **In this section** - [update()](https://animejs.com/documentation/engine/engine-methods/update "update()") - [pause()](https://animejs.com/documentation/engine/engine-methods/pause "pause()") - [resume()](https://animejs.com/documentation/engine/engine-methods/resume "resume()") **Previous** **Next** - [Engine parameters](https://animejs.com/documentation/engine/engine-parameters "Engine parameters") - [update()](https://animejs.com/documentation/engine/engine-methods/update "update()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Time Staggering in Anime.js Time staggering Search [Stagger](https://animejs.com/documentation/stagger "Stagger") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) # [Time staggering](https://animejs.com/documentation/stagger/time-staggering "Time staggering") Tween's time related properties like `delay` and `duration` accepts Function-based values, enabling the use of the stagger function returned by the `stagger()` method in multi-target animations. This results in each target tween having different timings, increasing by a set number of milliseconds for each subsequent target. ```hljs javascript import { animate, stagger } from 'animejs'; animate('.square', { x: '17rem', delay: stagger(100), duration: stagger(200, { start: 500 }), loop: true, alternate: true }); ``` ```hljs html language-xml
delay: 0ms;   duration: 500ms
delay: 100ms; duration: 700ms
delay: 200ms; duration: 900ms
delay: 300ms; duration: 1100ms
``` **Previous** **Next** - [Stagger](https://animejs.com/documentation/stagger "Stagger") - [Values staggering](https://animejs.com/documentation/stagger/values-staggering "Values staggering") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## roundPad() Utility roundPad() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [roundPad() V4](https://animejs.com/documentation/utilities/round-pad "roundPad()") Rounds a value to a specified decimal length, pads with zeros if needed, and returns the result as a string, or creates a rounding and padding `Function` with a pre-defined _decimalLength_ parameter. ```js hljs language-javascript const roundedPaddedValue = utils.roundPad(value, decimalLength); const roundPadderFunction = utils.roundPad(decimalLength); ``` ## Parameters | Name | Accepts | | --- | --- | | value (opt) | `Number` / `String` | | decimalLength | `Number` | ## Returns A `String` if a value is provided, otherwise a [chain-able utility](https://animejs.com/documentation/utilities/chain-able-utility-functions "chain-able utility") `Function` to round and pad numbers to the specified decimal length: ```js hljs language-javascript const roundPadTo2Decimals = utils.roundPad(2); roundPadTo2Decimals(90.12345); // '90.12' roundPadTo2Decimals(120); // '120.00' roundPadTo2Decimals(15.9); // '15.90' const snapAndRoundPad = utils.snap(50).roundPad(2); // Snap to nearest 50 then roundPad to 2 decimal places snapAndRoundPad(123.456); // '100.00' snapAndRoundPad(175.789); // '200.00' ``` ```hljs javascript import { animate, utils } from 'animejs'; animate('.value', { innerHTML: '8.1', modifier: utils.roundPad(3), duration: 10000, ease: 'linear', }); ``` ```hljs html language-xml 
    0.000
``` **Previous** **Next** - [interpolate()](https://animejs.com/documentation/utilities/interpolate "interpolate()") - [padStart()](https://animejs.com/documentation/utilities/pad-start "padStart()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 3.685 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js Scope Parameters Scope parameters Search [Scope](https://animejs.com/documentation/scope "Scope") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Scope parameters](https://animejs.com/documentation/scope/scope-parameters "Scope parameters") ```js hljs language-javascript import { createScope, animate } from 'animejs'; createScope({ ┌─────────────────────────────────────────────────┐ │ root: '.section', │ │ defaults: { │ │ duration: 250, │ │ ease: 'out(4)', │ │ }, ├─ Parameters │ mediaQueries: { │ │ mobile: '(max-width: 640px)', │ │ reducedMotion: '(prefers-reduced-motion)', │ │ } │ └─────────────────────────────────────────────────┘ }) .add( ctx => { const isMobile = ctx.matches.mobile; const reduceMotion = ctx.matches.reducedMotion; animate(targets, { x: isMobile ? 0 : '100vw', y: isMobile ? '100vh' : 0, duration: reduceMotion ? 0 : 750 }); }); ``` **In this section** - [root](https://animejs.com/documentation/scope/scope-parameters/root "root") - [defaults](https://animejs.com/documentation/scope/scope-parameters/defaults "defaults") - [mediaQueries](https://animejs.com/documentation/scope/scope-parameters/mediaqueries "mediaQueries") **Previous** **Next** - [Register method function](https://animejs.com/documentation/scope/register-method-function "Register method function") - [root](https://animejs.com/documentation/scope/scope-parameters/root "root") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Values Staggering Values staggering Search [Stagger](https://animejs.com/documentation/stagger "Stagger") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) # [Values staggering](https://animejs.com/documentation/stagger/values-staggering "Values staggering") All tweens animatable properties accept function-based values, enabling the use of the stagger function returned by the `stagger()` method in multi-target animations. This results in each target having a staggered value, increasing by a set number for each subsequent target. ```hljs javascript import { animate, stagger } from 'animejs'; const animation = animate('.square', { y: stagger(['-2.75rem', '2.75rem']), rotate: { from: stagger('-.125turn') }, loop: true, alternate: true }); ``` ```hljs html language-xml
``` **Previous** **Next** - [Time staggering](https://animejs.com/documentation/stagger/time-staggering "Time staggering") - [Timeline positions staggering](https://animejs.com/documentation/stagger/timeline-positions-staggering "Timeline positions staggering") ## Animatable Properties Animatable properties Search [Animatable](https://animejs.com/documentation/animatable "Animatable") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Animatable properties](https://animejs.com/documentation/animatable/animatable-properties "Animatable properties") ```js hljs language-javascript const animatable = createAnimatable(targets, parameters); ┌───────────┐ animatable.│targets ├─ Properties animatable.│animations │ └───────────┘ ``` | Name | Description | | --- | --- | | targets | Gets the animatable [Targets](https://animejs.com/documentation/animation/targets "Targets") ( `Array`) | | animations | Gets all animatable [Animations](https://animejs.com/documentation/animation "Animations") ( `Object`) | **Previous** **Next** - [Animatable methods](https://animejs.com/documentation/animatable/animatable-methods "Animatable methods") - [Draggable](https://animejs.com/documentation/draggable "Draggable") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Random Element Picker randomPick() Search [Utilities](https://animejs.com/documentation/utilities "Utilities") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [randomPick() V4](https://animejs.com/documentation/utilities/random-pick "randomPick()") Returns a random element from a collection. ```js hljs language-javascript const ramdomElement = utils.randomPick(collection); ``` ## Parameters | Name | Accepts | | --- | --- | | collection | `Array` \| `NodeList` \| `String` | ## Returns An random element from the collection ```hljs javascript import { utils } from 'animejs'; utils.set('.letter', { x: () => utils.randomPick([5, 9, 13, 17]) + 'rem', scale: () => utils.randomPick([1, 1.25, 1.5, 1.75]), color: () => `var(--hex-${utils.randomPick(['red', 'orange', 'yellow'])})`, innerHTML: () => utils.randomPick('ABCD'), }); ``` ```hljs html language-xml
A
B
C
D
``` **Previous** **Next** - [random()](https://animejs.com/documentation/utilities/random "random()") - [shuffle()](https://animejs.com/documentation/utilities/shuffle "shuffle()") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius D D D C A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## ScrollObserver Properties scrollObserver properties Search [ScrollObserver](https://animejs.com/documentation/scroll "ScrollObserver") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [scrollObserver properties](https://animejs.com/documentation/scroll/scrollobserver-properties "scrollObserver properties") ```js hljs language-javascript const scrollObserver = onScroll(parameters); ┌───────┐ scrollObserver.│target │ scrollObserver.│linked ├─ Properties scrollObserver.│repeat │ └───────┘ ``` | Name | Description | | --- | --- | | id | Gets the unique identifier for the ScrollObserver instance ( `Number`) | | container | Gets the scroll container associated with this observer ( `ScrollContainer`) | | target | Gets the target element being observed ( `HTMLElement`) | | linked | Gets the linked object ( `Animation` \| `Timer` \| `Timeline`) | | repeat | Gets whether the observer should repeat ( `Boolean`) | | horizontal | Gets whether the scroll direction is horizontal ( `Boolean`) | | enter | Gets the enter threshold ( `String` \| `Number`) | | leave | Gets and sets the leave threshold ( `String` \| `Number`) | | sync | Gets whether synchronisation is enabled ( `Boolean`) | | velocity | Gets the current scroll velocity ( `Number`) | | backward | Gets whether the scroll direction is backward ( `Boolean`) | | scroll | Gets the current scroll position ( `Number`) | | progress | Gets the current progress of the observed element (0 to 1) ( `Number`) | | completed | Gets whether the observation has completed ( `Boolean`) | | began | Gets whether the observation has begun ( `Boolean`) | | isInView | Gets whether the observed element is currently in view ( `Boolean`) | | offset | Gets the offset of the observed element ( `Number`) | | offsetStart | Gets the start offset of the observed element ( `Number`) | | offsetEnd | Gets the end offset of the observed element ( `Number`) | | distance | Gets the scroll distance for the observed element ( `Number`) | **Previous** **Next** - [ScrollObserver methods](https://animejs.com/documentation/scroll/scrollobserver-methods "ScrollObserver methods") - [Scope](https://animejs.com/documentation/scope "Scope") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Draggable Callbacks Guide Draggable callbacks Search [Draggable](https://animejs.com/documentation/draggable "Draggable") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Draggable callbacks](https://animejs.com/documentation/draggable/draggable-callbacks "Draggable callbacks") Execute functions at specific points while dragging an element. Draggable callback functions are specified directly in the `createDraggable()` parameters `Object`. ```js hljs language-javascript createDraggable('.square', { x: { snap: 100 }, y: { snap: 50 }, modifier: utils.wrap(-200, 0), containerPadding: 10, containerStiffness: 40, containerEase: 'out(3)', ┌────────────────────────┐ │ onGrab: () => {}, │ │ onDrag: () => {}, ├─ Callbaks │ onRelease: () => {}, │ └────────────────────────┘ }); ``` **In this section** - [onGrab](https://animejs.com/documentation/draggable/draggable-callbacks/ongrab "onGrab") - [onDrag](https://animejs.com/documentation/draggable/draggable-callbacks/ondrag "onDrag") - [onUpdate](https://animejs.com/documentation/draggable/draggable-callbacks/onupdate "onUpdate") - [onRelease](https://animejs.com/documentation/draggable/draggable-callbacks/onrelease "onRelease") - [onSnap](https://animejs.com/documentation/draggable/draggable-callbacks/onsnap "onSnap") - [onSettle](https://animejs.com/documentation/draggable/draggable-callbacks/onsettle "onSettle") - [onResize](https://animejs.com/documentation/draggable/draggable-callbacks/onresize "onResize") - [onAfterResize](https://animejs.com/documentation/draggable/draggable-callbacks/onafterresize "onAfterResize") **Previous** **Next** - [Draggable settings](https://animejs.com/documentation/draggable/draggable-settings "Draggable settings") - [onGrab](https://animejs.com/documentation/draggable/draggable-callbacks/ongrab "onGrab") ``` npm i animejs ``` ``` npm i animejs ``` ``` import { animate } from 'animejs' ``` ``` import { animate } from 'animejs' ``` rotations: 0 rotations: 0 rotations: 0 rotations: 0 ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` callback fired 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` loops count 0 ``` ``` iteration time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` iteration time 0 ``` ``` current time 0 ``` ``` current time 0 ``` Play ``` current time 0 ``` Play ``` fps 60 ``` ``` current time 0 ``` ``` fps 60 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` speed 2.0 ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` began false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` completed false ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` updates 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` loops 0 ``` ``` iteration time 0 ``` ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` paused 0 ``` ``` elapsed time 0 ``` ResumePause ``` promise status pending ``` ``` current time 0 ``` ``` promise status pending ``` ``` current time 0 ``` ``` iteration time 0 ``` Play ``` iteration time 0 ``` Play ``` iteration time 0 ``` Reverse ``` iteration time 0 ``` Reverse ``` current time 0 ``` Pause ``` current time 0 ``` Pause ``` current time 0 ``` Restart ``` current time 0 ``` Restart ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` Alternate ``` iteration time 0 ``` ResumePauseAlternate ``` iteration time 0 ``` ResumePauseAlternate ``` current time 0 ``` Complete ``` current time 0 ``` Complete ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayCancel ``` current time 0 ``` PlayRevert ``` current time 0 ``` PlayRevert ``` current time 0 ``` Play ``` current time 0 ``` Play ``` duration 2000 ``` ``` current time 0 ``` ``` duration 2000 ``` ``` current time 0 ``` ## HELLOWORLD ## HELLOWORLD ``` {"x":0,"y":0} ``` ``` {"x":0,"y":0} ``` ``` {"x":"0"} ``` ``` {"x":"0"} ``` JS / WAAPI WAAPI JS / WAAPI WAAPI ``` {"number":1337,"unit":"42%"} ``` ``` {"number":1337,"unit":"42%"} ``` ``` ``` ``` ``` \+ 90°\- 90°× .5 \+ 90°\- 90°× .5 delaytranslateX delayrotate delaytranslateX delayrotate translateX rotate translateX rotate all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' all: 'inQuad' all: eases.outQuad x: createSpring() rotate: 'inQuad' none replace blend (Hover the squares) none replace blend (Hover the squares) utils.round(0) v => v % 17 v => Math.cos(v) / 2 utils.round(0) v => v % 17 v => Math.cos(v) / 2 delaytranslateX delayscale delaytranslateX delayscale duration: 0 duration: 500 duration: 2000 duration: 0 duration: 500 duration: 2000 loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loop: 3 loop: 3, alternate: true loop: 3, reversed: true loop: true loopDelaytranslateXloopDelay loopDelayscaleloopDelay loopDelaytranslateXloopDelay loopDelayscaleloopDelay alternate: false alternate: true alternate: true, reversed: true alternate: false alternate: true alternate: true, reversed: true reversed: false reversed: true reversed: false reversed: true autoplay: true autoplay: false autoplay: true autoplay: false ``` fps 60 ``` ``` fps 60 ``` ``` speed 1.00 ``` ``` speed 1.00 ``` ``` began false ``` delaytranslateX ``` began false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` completed false ``` delaytranslateX ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` updates 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` renders 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` loops 0 ``` loopDelaytranslateXloopDelay ``` paused 0 ``` Animate xPause animRemove target ``` paused 0 ``` Animate xPause animRemove target ``` promise status pending ``` delaytranslateX ``` promise status pending ``` delaytranslateX Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` timer 01 0 ``` ``` timer 02 0 ``` ``` timer 03 0 ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` current time 0 ``` ``` current time 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` current time 0 ``` ``` current time 0 ``` ``` paused true ``` Play ``` paused true ``` Play ``` fps 60 ``` ``` fps 60 ``` ``` speed 2.0 ``` ``` speed 2.0 ``` ``` began false ``` ``` began false ``` ``` completed false ``` ``` completed false ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` renders 0 ``` ``` renders 0 ``` ``` loops 0 ``` ``` loops 0 ``` ``` paused 0 ``` Create TLPause TLRemove shapes ``` paused 0 ``` Create TLPause TLRemove shapes ``` promise status pending ``` ``` promise status pending ``` ``` value 0 ``` ``` value 0 ``` Remove animRemove targetremove tween Remove animRemove targetremove tween ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` ``` function A -- ``` ``` function B -- ``` ``` function C -- ``` Play Play Reverse Reverse Pause Pause Restart Restart Alternate Alternate PauseAlternateResume PauseAlternateResume Complete Complete CancelPlay CancelPlay RevertRestart RevertRestart Play Play ``` total duration 0 ``` ``` total duration 0 ``` Refresh & Restart Refresh & Restart Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around Move cursor around linear outElastic linear outElastic snapped inverted snapped inverted ``` x 0 ``` ``` y 0 ``` Move cursor around ``` x 0 ``` ``` y 0 ``` Move cursor around Move cursor around Move cursor around Revert Revert x enabled x disabled x enabled x disabled y enabled y disabled y enabled y disabled ``` grabs 0 ``` ``` grabs 0 ``` ``` drags 0 ``` ``` drags 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` releases 0 ``` ``` releases 0 ``` ``` snaps 0 ``` ``` snaps 0 ``` ``` stops 0 ``` ``` stops 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` ``` resizes 0 ``` Disable Disable Enable Enable Set random x Set random x Set random y Set random y Animate in view Animate in view Scroll in view Scroll in view Stop Stop Reset Reset Revert Revert Refresh Refresh scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll down scroll down ``` timer 0 ``` scroll down ``` timer 0 ``` scroll down scroll up scroll down scroll up scroll right → scroll right → scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down ``` repeat upddates 0 ``` ``` no repeat updates 0 ``` scroll up scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` entered 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` exits 0 ``` ``` updates 0 ``` ``` updates 0 ``` ``` completions 0 ``` ``` completions 0 ``` scroll down scroll down scroll down scroll down scroll down scroll down outside scope inside scope outside scope outside scope inside scope outside scope scope 1 scope 2 scope 3 scope 1 scope 2 scope 3 Revert row 1Revert row 2 Revert row 1Revert row 2 Refresh row 1Refresh row 2 Refresh row 1Refresh row 2 delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms delay: 0ms;   duration: 500ms delay: 100ms; duration: 700ms delay: 200ms; duration: 900ms delay: 300ms; duration: 1100ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 0rem delay: 0ms x: 5.75rem delay: 100ms x: 11.5rem delay: 200ms x: 17.25rem delay: 300ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms x: 14rem, delay: 500ms x: 15rem, delay: 600ms x: 16rem, delay: 700ms x: 17rem, delay: 700ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms delay: 300ms delay: 200ms delay: 100ms delay: 0ms Suzuka Suzuka Set stylesRevert styles Set stylesRevert styles ``` updates -- ``` Remove all firstRemove x second ``` updates -- ``` Remove all firstRemove x second Keep styles (default) Clean translateX and borderRadius Keep styles (default) Clean translateX and borderRadius A B C D A B C D A B C D E F Shuffle A B C D E F Shuffle ``` speed 1.00 ``` ``` speed 1.00 ``` input lerped lerped 15fps input lerped lerped 15fps normal rounded (.1) normal rounded (.1) normal clamped \[.25,.75\] normal clamped \[.25,.75\] normal snapped (.25) normal snapped (.25) normal wrapped \[-.25,.25\] normal wrapped \[-.25,.25\] normal mapped \[0,12\] \[0,1\] normal mapped \[0,12\] \[0,1\] normal interpolated \[0,12\] normal interpolated \[0,12\] ``` 0.000 ``` ``` 0.000 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` ``` 0 ``` degrees radians degrees radians radians degrees radians degrees ``` 0 ``` ``` 0 ``` ## HELLOWAAPI ## HELLOWAAPI ``` {"x": '0rem',"rotate":"0deg"} ``` ``` {"x": '0rem',"rotate":"0deg"} ``` WAAPI JS Block CPU WAAPI JS Block CPU ``` promise status pending ``` ``` promise status pending ``` stiffness: 100 stiffness: 150 stiffness: 200 stiffness: 100 stiffness: 150 stiffness: 200 ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` duration: 1 0 ``` ``` duration: 1000 0 ``` millisecondsseconds ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) ``` global time 0 ``` ``` engine time 0 ``` ● Enabled (Switch tab to see the effect) Add animationPause for 3 seconds Add animationPause for 3 seconds PauseResume PauseResume ## Anime.js GitHub Sponsors [![Jordan](https://avatars.githubusercontent.com/u/22655736?u=2acd983fcc5ad01381948275ea01979b88de4c42&v=4)Jordan](https://github.com/JordanMcn) [![Sebastian](https://avatars.githubusercontent.com/u/65504843?u=25ec043e00eaec390c1e3c3a228220caa81e7adb&v=4)Sebastian](https://github.com/iaslfw) [![Ivan Zarea](https://avatars.githubusercontent.com/u/1770364?u=428b7aa2d9460fa4a835af89abea550b9d29c454&v=4)Ivan Zarea](https://github.com/minivan) [![Rhemery](https://avatars.githubusercontent.com/u/44171696?u=f4dbe50c17bbf7c43d9dd8a650a027d06db860e6&v=4)Rhemery](https://github.com/Rhemery) [![](https://avatars.githubusercontent.com/u/4291354?u=d62b6917e998cb98640c1b6d0c102c656b2ada17&v=4)satoshionoda](https://github.com/satoshionoda) [![](https://avatars.githubusercontent.com/u/11381341?v=4)bparrillo](https://github.com/bparrillo) [![Dikshith](https://avatars.githubusercontent.com/u/60872546?u=b79ddc994408dca5820578d570eb85f7cb4fde75&v=4)Dikshith](https://github.com/dikshithvishnu) [![Richard Davey](https://avatars.githubusercontent.com/u/164476?v=4)Richard Davey](https://github.com/photonstorm) [![Mase Graye](https://avatars.githubusercontent.com/u/9310?u=179151b7c0e01aa08598bfc041508a83998c759e&v=4)Mase Graye](https://github.com/masegraye) [![Aaron Wade](https://avatars.githubusercontent.com/u/579887?v=4)Aaron Wade](https://github.com/areus) [![entrepeneur4lyf](https://avatars.githubusercontent.com/u/7050547?u=6b8363270340d09f9ad6db60c0774d947263f2dc&v=4)entrepeneur4lyf](https://github.com/entrepeneur4lyf) [![Matvey Levinson](https://avatars.githubusercontent.com/u/12140030?v=4)Matvey Levinson](https://github.com/matveyson) [![Nicolaj Andersen](https://avatars.githubusercontent.com/u/24498666?u=ff20853719d64b605ca829dbd6e5e4cdc48c342d&v=4)Nicolaj Andersen](https://github.com/nicolaj-spartan-dk) [![](https://avatars.githubusercontent.com/u/190331083?v=4)lilchocobo](https://github.com/lilchocobo) [![Artisann](https://avatars.githubusercontent.com/u/37394584?u=0a4171427e4f16d8fe0a1e57af04c43e21ab6ed0&v=4)Artisann](https://github.com/ImArtisann) [![Daniel Cruz ](https://avatars.githubusercontent.com/u/20308945?u=f38b5218c48a8c4062d317450bb404cc9b361ee6&v=4)Daniel Cruz](https://github.com/ddanielcruzz) [![Mike ](https://avatars.githubusercontent.com/u/10676303?u=b065c596da0b64b594bb27dd48b8a3306172e27e&v=4)Mike](https://github.com/mykongee) [![Scott Ashton](https://avatars.githubusercontent.com/u/2257337?u=008869cc91fee8b5d399b05f4dac10dabfc61453&v=4)Scott Ashton](https://github.com/scottmas) [![Njordr](https://avatars.githubusercontent.com/u/143640281?u=111a3cdd4945c379ddd487c2faa3bfbbbc18bc06&v=4)Njordr](https://github.com/Njordrenterprises) [![Huly® Platform™](https://avatars.githubusercontent.com/u/87086734?v=4)Huly® Platform™](https://github.com/hcengineering) [![Mr White](https://avatars.githubusercontent.com/u/42571711?u=466d2b07fe847e8ea33a17c661e733df7a1148dc&v=4)Mr White](https://github.com/Neuron-Mr-White) [![Ismail Magomedov](https://avatars.githubusercontent.com/u/20561501?u=cab322f30ebe4f4bbfc056b8af2f87b4ab68cff9&v=4)Ismail Magomedov](https://github.com/izmaelmag) [![David Lapointe Gilbert](https://avatars.githubusercontent.com/u/412352?u=aae5e2d4f1a518805529da191830c3c5fa1db5fe&v=4)David Lapointe Gilbert](https://github.com/davidwebca) [![Stefan](https://avatars.githubusercontent.com/u/5545171?u=ba1b5f5376949d6ab5a451c1587de028768904b1&v=4)Stefan](https://github.com/okydk) [![Carmen Ansio](https://avatars.githubusercontent.com/u/15913811?u=86dc9a6bd146631998a3125bfd1d1d5beca7a00d&v=4)Carmen Ansio](https://github.com/carmenansio) [![](https://avatars.githubusercontent.com/u/17936291?v=4)jamesd256](https://github.com/jamesd256) [![Kaze Wong](https://avatars.githubusercontent.com/u/8803931?u=80d386617ffed30b6afc306b8f214aab5c914c22&v=4)Kaze Wong](https://github.com/kazewong) [![Frank Frick](https://avatars.githubusercontent.com/u/5831115?u=b3a46ced3bfbbb85ec9de81c1fbcb11b8b1e4a4e&v=4)Frank Frick](https://github.com/pompidou) [![Ado Kukic](https://avatars.githubusercontent.com/u/1770570?u=b8cd738bcfedb4ea5d56d8afc9b6626cfe3e78d0&v=4)Ado Kukic](https://github.com/kukicado) [![bandit.camp](https://avatars.githubusercontent.com/u/135350596?v=4)bandit.camp](https://github.com/bandit-camp) [![Osande de Jesus](https://avatars.githubusercontent.com/u/157477355?u=15354e2298c8018624fdd8ded981ff934fc2ce40&v=4)Osande de Jesus](https://github.com/OsandeJ) [![](https://avatars.githubusercontent.com/u/4672051?v=4)talli](https://github.com/talli) [![](https://avatars.githubusercontent.com/u/1417323?u=12876f6373e65427454a3616b219e1d3f3c78a8e&v=4)EvGreen](https://github.com/EvGreen) [![](https://avatars.githubusercontent.com/u/52384531?v=4)willmcinnis](https://github.com/willmcinnis) [![Luke Jackson](https://avatars.githubusercontent.com/u/1457604?u=d9d97c4fd4fa68499276f5f578c19961ebcdac8d&v=4)Luke Jackson](https://github.com/lukejacksonn) [![Calvin Ducharme](https://avatars.githubusercontent.com/u/114726827?u=1a6e7d5663203a3b23ff0875517533cd0b00b7f2&v=4)Calvin Ducharme](https://github.com/calvinusesyourcode) [![Donovan Dikaio](https://avatars.githubusercontent.com/u/869535?u=3018bd6cf8fbee7c6f1a7f594428bb6b4cef18c4&v=4)Donovan Dikaio](https://github.com/dikaio) [![Zaid Al Kazemi](https://avatars.githubusercontent.com/u/84647728?u=0da38d40520d88563af56c87f2c0ba7fbb8080c1&v=4)Zaid Al Kazemi](https://github.com/zalkazemi) [![Daniela Aviles](https://avatars.githubusercontent.com/u/21283784?u=c7b74fc8bfcc29aabd6e895d4c2463beed40e105&v=4)Daniela Aviles](https://github.com/danielaag) [![Arjun Samir Patel](https://avatars.githubusercontent.com/u/47369740?u=40fa0c9e30f2eda57346c7edb52c4c2777b4a096&v=4)Arjun Samir Patel](https://github.com/arjunsamir) [![](https://avatars.githubusercontent.com/u/11277564?v=4)lucasskywalker](https://github.com/lucasskywalker) [![Gokul Js](https://avatars.githubusercontent.com/u/51263906?u=f51069ba1b28227e2cc837441b134bbc3c15495a&v=4)Gokul Js](https://github.com/gokuljs) [![Micky Cormier](https://avatars.githubusercontent.com/u/44218577?v=4)Micky Cormier](https://github.com/micky-cormier) [![Umut Ozan Yıldırım](https://avatars.githubusercontent.com/u/1093695?v=4)Umut Ozan Yıldırım](https://github.com/feluna) [![](https://avatars.githubusercontent.com/u/123018012?v=4)michelducker](https://github.com/michelducker) [![Joshua T.](https://avatars.githubusercontent.com/u/44368997?u=f0a0c9f923d7c1e2159d23175cfb4e0e1bb0cbf6&v=4)Joshua T.](https://github.com/radiantly) [![ash-ftdx](https://avatars.githubusercontent.com/u/188714983?u=313f285b14dde210f0dd26fcd8628d17cda7067e&v=4)ash-ftdx](https://github.com/ftdx-ash) [![](https://avatars.githubusercontent.com/u/3170225?v=4)InTheScript](https://github.com/InTheScript) [![Sam Denty](https://avatars.githubusercontent.com/u/13242392?u=1c8024be99e2142fffb6adbb2f818f702cb2ba82&v=4)Sam Denty](https://github.com/samdenty) [![RickEvry](https://avatars.githubusercontent.com/u/1908341?v=4)RickEvry](https://github.com/rickevry) [![Karl Ackermann](https://avatars.githubusercontent.com/u/1025680?u=9f1098196fca3b21fac45b19465ee80bae6a2d8e&v=4)Karl Ackermann](https://github.com/karlbot) [![sit](https://avatars.githubusercontent.com/u/20511387?u=a8a0dcb0229a5db36d5a43b875eaab110cf5ebd4&v=4)sit](https://github.com/timas130) [![Eric Van Holtz](https://avatars.githubusercontent.com/u/1682225?u=4ac7fe0fd8598fba95224fc1a67db24d3a99b1aa&v=4)Eric Van Holtz](https://github.com/vonscriptor) [![Tim Kang](https://avatars.githubusercontent.com/u/8601493?u=4ee62b87479fbfb7ea8b5e20ed910c3824b1c310&v=4)Tim Kang](https://github.com/illestrater) [![halftone](https://avatars.githubusercontent.com/u/86031051?u=19fafed4a93b10fb6f600c30cf583dc49dee12f4&v=4)halftone](https://github.com/asymptonic) [![Majo](https://avatars.githubusercontent.com/u/3807302?v=4)Majo](https://github.com/majofeechiou) [![AliGGGG](https://avatars.githubusercontent.com/u/123049964?v=4)AliGGGG](https://github.com/Azizultra32) [![](https://avatars.githubusercontent.com/u/25451887?v=4)o0sh4d0w0o](https://github.com/o0sh4d0w0o) [![Josh Bradley](https://avatars.githubusercontent.com/u/24702802?u=b1e74cb7535f1b9ac260c2bcd0fd5a4a0626ab20&v=4)Josh Bradley](https://github.com/joshuabradley012) [![](https://avatars.githubusercontent.com/u/1121725?v=4)Eketol](https://github.com/Eketol) [![Lucas Oliveira](https://avatars.githubusercontent.com/u/197033?u=600e0223586f9166cd62fb909da896739f7c7afc&v=4)Lucas Oliveira](https://github.com/lao) [![Kino](https://avatars.githubusercontent.com/u/100756386?u=ddb68236ce0368afaf64fc671cd02f8828fcfb67&v=4)Kino](https://github.com/0xKino) [![Alex](https://avatars.githubusercontent.com/u/56684844?u=183f8448907a5168fa7ac68e3b38f6247dd63d90&v=4)Alex](https://github.com/Dakumisu) [![DiegoLindner](https://avatars.githubusercontent.com/u/2091293?u=6e51eb1a83632573fd481be390949b0880dd66fe&v=4)DiegoLindner](https://github.com/HerrLindner) [![Mitt](https://avatars.githubusercontent.com/u/8129570?u=d915179a7f43297e3c1c1a4a65e7f87d927967bb&v=4)Mitt](https://github.com/mittcoats) [![Elrond](https://avatars.githubusercontent.com/u/7118754?u=2fdcdec87990222f732dd517f0cfd35afc4194cc&v=4)Elrond](https://github.com/elrondshep) [![Kristen](https://avatars.githubusercontent.com/u/685518?u=4a6880fc67b9455e2e9af9f531f8aac4bf0cd606&v=4)Kristen](https://github.com/pzuraq) [![Luke Mann](https://avatars.githubusercontent.com/u/28356568?u=7c12483672a84eb55bab919bcc6be83e66e4376c&v=4)Luke Mann](https://github.com/lukejmann) [![Atle Selbek](https://avatars.githubusercontent.com/u/7033186?v=4)Atle Selbek](https://github.com/Nolux) [![Gorka](https://avatars.githubusercontent.com/u/1006865?v=4)Gorka](https://github.com/gorkamolero) [![Sören Meier](https://avatars.githubusercontent.com/u/16178877?u=739b6e357c3c58a0bf10f929bc0a2580e849daa1&v=4)Sören Meier](https://github.com/soerenmeier) [![](https://avatars.githubusercontent.com/u/140085084?v=4)PP-Tom](https://github.com/PP-Tom) [![Ricardo Gonzalez](https://avatars.githubusercontent.com/u/30808859?u=a7a495be11f99ca9b492c88f647760cbfb7a687b&v=4)Ricardo Gonzalez](https://github.com/BGS-RGonzalez) [![Makio64](https://avatars.githubusercontent.com/u/213351?v=4)Makio64](https://github.com/Makio64) [![Davo Galavotti](https://avatars.githubusercontent.com/u/76307?v=4)Davo Galavotti](https://github.com/davo) [![](https://avatars.githubusercontent.com/u/374134?v=4)yellow1912](https://github.com/yellow1912) [![Chuck Dries](https://avatars.githubusercontent.com/u/1351436?u=eaf9fdf001221636b78b574f9c4e115b592f5a48&v=4)Chuck Dries](https://github.com/chuckdries) [![Andrew Plein](https://avatars.githubusercontent.com/u/14238509?u=bf69babfa87a32f335ec5ddd9f24f1be94e80dba&v=4)Andrew Plein](https://github.com/blockmonkey) [![Vitalii Nevidomyi](https://avatars.githubusercontent.com/u/335118?v=4)Vitalii Nevidomyi](https://github.com/nevidomy) [![Henrik Stridsman](https://avatars.githubusercontent.com/u/40425150?v=4)Henrik Stridsman](https://github.com/henrik377) [![Vercel](https://avatars.githubusercontent.com/u/14985020?v=4)Vercel](https://github.com/vercel) [![Meelix](https://avatars.githubusercontent.com/u/39708770?u=ecaae7f93806e27ea1800c03b1c10ef318f6cb77&v=4)Meelix](https://github.com/meelix) [![Yuri](https://avatars.githubusercontent.com/u/114388?v=4)Yuri](https://github.com/yurivish) [![limbobark](https://avatars.githubusercontent.com/u/24642771?v=4)limbobark](https://github.com/limbobark) [![Fedor Parfenov](https://avatars.githubusercontent.com/u/10249425?u=6880e6a2efa0ec0b0f5998eb1786a5a1aaff8e79&v=4)Fedor Parfenov](https://github.com/fvpDev) [![Genius Mubvumbi](https://avatars.githubusercontent.com/u/72968888?v=4)Genius Mubvumbi](https://github.com/XYB3RSKY) [![InfoPilot-io](https://avatars.githubusercontent.com/u/157612716?v=4)InfoPilot-io](https://github.com/InfoPilot-io) [![supersage](https://avatars.githubusercontent.com/u/3267150?u=b52cfa041e8e3977ccfe6634bc32b480810a6aca&v=4)supersage](https://github.com/superrsage) [![Sameer Anand](https://avatars.githubusercontent.com/u/3168008?u=4422940354967b4eea463af560ea24c327cbc8fe&v=4)Sameer Anand](https://github.com/sameerxanand) [![Tuomo Kulomaa](https://avatars.githubusercontent.com/u/29172317?u=d583bdd937c8f8187f172a2fd81f3a04f642d2e2&v=4)Tuomo Kulomaa](https://github.com/TuomoKu) [![Michael Gai](https://avatars.githubusercontent.com/u/155538?u=a8bb8c16507d0b11d02a28a63be28f8b3f1ce389&v=4)Michael Gai](https://github.com/mikegai) [![Rainer Borene](https://avatars.githubusercontent.com/u/101501?u=b9368cd286f05d7b8998746f81d8cb3c2bd247c1&v=4)Rainer Borene](https://github.com/rainerborene) [![ikjunim](https://avatars.githubusercontent.com/u/116860316?u=238ec1359236e493167f8fc1d2ac8ab389693f19&v=4)ikjunim](https://github.com/ikjunim) [![Jared](https://avatars.githubusercontent.com/u/25267784?u=d312d2ee434eaf2568c772db393d10176c8be6d8&v=4)Jared](https://github.com/rayosdev) [![Niklas Lepistö](https://avatars.githubusercontent.com/u/6230909?u=eff99724b32b002ffe870b103c16db6677412495&v=4)Niklas Lepistö](https://github.com/laznic) [![](https://avatars.githubusercontent.com/u/30072306?v=4)damienVizu](https://github.com/damienVizu) [![Matt Perry](https://avatars.githubusercontent.com/u/7850794?u=c7a82c242c85e58c8ceeac958e7f9ad774f2147b&v=4)Matt Perry](https://github.com/mattgperry) [![Kaito Yamashiro](https://avatars.githubusercontent.com/u/24599061?u=c8ed69b54401515e3c7fc6ead6ccbf491044a3d6&v=4)Kaito Yamashiro](https://github.com/KaitoYamashiro) [![](https://avatars.githubusercontent.com/u/1257821?u=b1b1593ab579f4aa4bedbc6fa64478b746a29ffb&v=4)pgdaniel](https://github.com/pgdaniel) [![Rodrigo Sales](https://avatars.githubusercontent.com/u/1041756?u=38218b9decd26697e142fe3ba5d09ff2ae307b2a&v=4)Rodrigo Sales](https://github.com/salez) [![L](https://avatars.githubusercontent.com/u/647815?v=4)L](https://github.com/illogikal) [![Benjamin Intal](https://avatars.githubusercontent.com/u/1033611?v=4)Benjamin Intal](https://github.com/bfintal) [![Kai Jauslin](https://avatars.githubusercontent.com/u/1143418?u=5955668da9eacc620ecd83dc4487688c81c5af50&v=4)Kai Jauslin](https://github.com/kaij) [![Justin Hall](https://avatars.githubusercontent.com/u/223952?u=9b1d118c9ae2e32bd312ae4477769287e28f9aa8&v=4)Justin Hall](https://github.com/jhalljhall) [![yolan](https://avatars.githubusercontent.com/u/53494809?u=01607bdd85fe6ad14a1431da25d96a3909e9ba22&v=4)yolan](https://github.com/yolanare) [![Tarek Badr](https://avatars.githubusercontent.com/u/31471186?u=2f2737b31c30d09de603fbe282ca91c469f42491&v=4)Tarek Badr](https://github.com/tarekbadrsh) [![Jérémy Vienney](https://avatars.githubusercontent.com/u/1255528?u=03abccfc54f1c49b1317cce0528632b573722684&v=4)Jérémy Vienney](https://github.com/jeremyvienney) [![Robert Stark](https://avatars.githubusercontent.com/u/8617673?u=770d2e1cb0cf72212f3f425e178f2e2068a2f893&v=4)Robert Stark](https://github.com/iamrobert) [![dong.huo](https://avatars.githubusercontent.com/u/1720349?u=c2717d11f8960987e30864044cf44054b894ea2c&v=4)dong.huo](https://github.com/FlatMapIO) [![Aaron Kenton](https://avatars.githubusercontent.com/u/8131304?v=4)Aaron Kenton](https://github.com/lightwalkernet) [![facciolo](https://avatars.githubusercontent.com/u/10351721?v=4)facciolo](https://github.com/nfacciolo) [![Dalton Gray](https://avatars.githubusercontent.com/u/14859935?u=915c2e3e2ff24d493818d4230974ea288ee80a40&v=4)Dalton Gray](https://github.com/daltongray) [![](https://avatars.githubusercontent.com/u/1432275?v=4)brayanirving](https://github.com/brayanirving) [![RatsClan](https://avatars.githubusercontent.com/u/13186243?u=d0f5bc8389b89eb321a72da22cf86af1c54b338c&v=4)RatsClan](https://github.com/sambedingfield) [![Sam Muirhead](https://avatars.githubusercontent.com/u/15368010?u=d27a3d5bc457e9e1c48a8bd9e501cafe01b8daec&v=4)Sam Muirhead](https://github.com/cameralibre) [![Daniel](https://avatars.githubusercontent.com/u/25322095?u=51984d75d171f488517ecc738edeae21392e988a&v=4)Daniel](https://github.com/vrpx) [![Luka Moran](https://avatars.githubusercontent.com/u/56466804?u=60625ed86f8bdd4e0794c5bfd77573ddfef32f0f&v=4)Luka Moran](https://github.com/lukapmoran) [![Joseph Clay](https://avatars.githubusercontent.com/u/4593699?v=4)Joseph Clay](https://github.com/JosephClay) [![Andoni Enriquez](https://avatars.githubusercontent.com/u/110390578?u=d75b1d9f46e0de62dbedb72b856a740a3872defa&v=4)Andoni Enriquez](https://github.com/andoni-enriquez) [![Zeus](https://avatars.githubusercontent.com/u/16010431?u=01b37593be7de0e7ae6e52e9dc0777a76b7dd6d4&v=4)Zeus](https://github.com/ice-zeus) [![Dylan](https://avatars.githubusercontent.com/u/107817481?u=cfb66d78c84e423f4a0c950473f1a98e8be44fc6&v=4)Dylan](https://github.com/dyl-kh) [![](https://avatars.githubusercontent.com/u/189306075?v=4)GPTGeneratedCode](https://github.com/GPTGeneratedCode) [![Aaron Iker](https://avatars.githubusercontent.com/u/4730431?u=810f2f1b1e34cf036d1f43380dcadc4d64b0b2de&v=4)Aaron Iker](https://github.com/aaroniker) [![Scott Straley](https://avatars.githubusercontent.com/u/795062?u=67e9d587b89a9dc86f6ac6bb24db4a2b84140c50&v=4)Scott Straley](https://github.com/straley) [![Ryo Takahashi](https://avatars.githubusercontent.com/u/23748102?u=a06082cba3b2fc1f536ce08fc7c9f1fceb109431&v=4)Ryo Takahashi](https://github.com/megatkhs) [![Zhanghao](https://avatars.githubusercontent.com/u/21242087?u=7c6a30151a5c2ca0f0a30b0eca3bb432016aeb75&v=4)Zhanghao](https://github.com/Yukiniro) [![Dan Milward](https://avatars.githubusercontent.com/u/1669583?u=5fabd10abd5d9f32dcf907655d237133c59c0bdf&v=4)Dan Milward](https://github.com/danmilward) [![](https://avatars.githubusercontent.com/u/38730517?u=305b8b15a7cd43488d594f3ce28b4ef2951217b5&v=4)csskiller](https://github.com/csskiller) [![Oliver Tacke](https://avatars.githubusercontent.com/u/16688047?v=4)Oliver Tacke](https://github.com/otacke) [![Datner](https://avatars.githubusercontent.com/u/22598347?u=ea4bf17b45012ac4fe123092160f529dea217ed0&v=4)Datner](https://github.com/datner) [![](https://avatars.githubusercontent.com/u/37222991?u=7f52aa92b7514832d45a6fa72f21ea88d41c8850&v=4)elypt](https://github.com/elypt) [![Marcus Skov](https://avatars.githubusercontent.com/u/5159399?u=e8bf6bda14697916c5f4d3e41011e4d7646b2e87&v=4)Marcus Skov](https://github.com/ramokz) [![EJ Fox](https://avatars.githubusercontent.com/u/530073?u=bf427304a7d55633534bfeb538451933e6cc71a4&v=4)EJ Fox](https://github.com/ejfox) [![Sikriti Dakua](https://avatars.githubusercontent.com/u/38714423?u=fd32f0f31a466f8de51d5d13008019cbd93843f2&v=4)Sikriti Dakua](https://github.com/devloop01) [![](https://avatars.githubusercontent.com/u/171258970?v=4)devqrofertas](https://github.com/devqrofertas) [![Álex Ávila (Omicrxn)](https://avatars.githubusercontent.com/u/46872250?u=dc8f210c65f9c86ee181cf34e1f6e05fbfb36b06&v=4)Álex Ávila (Omicrxn)](https://github.com/Omicrxn) [![](https://avatars.githubusercontent.com/u/1492806?u=38abb42cb267eef81b89fccbb54c49b49eb074f9&v=4)johanviberg](https://github.com/johanviberg) [![Saksit Sawang](https://avatars.githubusercontent.com/u/54638376?v=4)Saksit Sawang](https://github.com/iinitz) [![Timo Lins](https://avatars.githubusercontent.com/u/1440854?u=5afb5bd85bf7f053ee75321afc5528a5d4651590&v=4)Timo Lins](https://github.com/timolins) [![Firtina Ozbalikchi](https://avatars.githubusercontent.com/u/108406948?u=33cd8a9687a66c611bf95fb8a36d027ec53fc7a7&v=4)Firtina Ozbalikchi](https://github.com/firtoz) [![Exercism](https://avatars.githubusercontent.com/u/5624255?v=4)Exercism](https://github.com/exercism) [![Maddison Hellstrom](https://avatars.githubusercontent.com/u/21299126?u=917d0fa587d2daad128045bd1348dafd28455f90&v=4)Maddison Hellstrom](https://github.com/b0o) [![](https://avatars.githubusercontent.com/u/105914?v=4)beysim](https://github.com/beysim) [![](https://avatars.githubusercontent.com/u/81880454?u=41c1710e4a86fed375e0a35c539d9df979254d25&v=4)zMyLlama](https://github.com/zMyLlama) [![João Paquim](https://avatars.githubusercontent.com/u/1531031?v=4)João Paquim](https://github.com/jpaquim) [![Alexis](https://avatars.githubusercontent.com/u/6659416?u=707d0036e70ba2ba98d5004bc22c08ab16505575&v=4)Alexis](https://github.com/marsouin) [![Astral_rider](https://avatars.githubusercontent.com/u/47975771?u=6dc0328cb90cd8b70a428e431ba28368a361e691&v=4)Astral\_rider](https://github.com/Aurora-creeper) [![Deyvid Jerônimo](https://avatars.githubusercontent.com/u/95938301?u=8807bdbb0820847bcb40cd0a69d349c73b802c88&v=4)Deyvid Jerônimo](https://github.com/dvddoge) [![Tyler Fahey](https://avatars.githubusercontent.com/u/6699959?u=bd2dde1f6570f2024c07aea866c2fec6042c55a5&v=4)Tyler Fahey](https://github.com/twfahey1) [![rvillas](https://avatars.githubusercontent.com/u/882593?u=af0d4ef5d5d643a95ea1ba211f0746d8ce8387d8&v=4)rvillas](https://github.com/rvillas) [![Jon Tetzlaff](https://avatars.githubusercontent.com/u/1500311?u=249ea4e0ad2952d2f42e9549a36fb6fc82c489ae&v=4)Jon Tetzlaff](https://github.com/tetz2442) [![Eemil Zhang](https://avatars.githubusercontent.com/u/38159584?u=79f868e086fb87ba66f9c2f8ba6cdad1803384ee&v=4)Eemil Zhang](https://github.com/EemilZhang) [![](https://avatars.githubusercontent.com/u/78391102?v=4)ebigtm](https://github.com/ebigtm) ## Max Velocity Settings maxVelocity Search [Draggable](https://animejs.com/documentation/draggable "Draggable")  [Settings](https://animejs.com/documentation/draggable/draggable-settings "Draggable settings") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [maxVelocity](https://animejs.com/documentation/draggable/draggable-settings/maxvelocity "maxVelocity") Specifies the maximum velocity to apply to the dragged element after release. ## Accepts - A `Number` greater than or equal to `0` - A `Function` that returns a `Number` greater than or equal to `0` When defined using a `Function`, the value will be automatically refreshed every time the container or target element is resized. It can also be refreshed manually using the [`refresh()`](https://animejs.com/documentation/draggable/draggable-methods/refresh) method. ## Default `50` ```hljs javascript import { createDraggable } from 'animejs'; createDraggable('.square', { container: '.grid', maxVelocity: 0, }); createDraggable('.circle', { container: '.grid', maxVelocity: 100, }); ``` ```hljs html language-xml
``` **Previous** **Next** - [minVelocity](https://animejs.com/documentation/draggable/draggable-settings/minvelocity "minVelocity") - [releaseEase](https://animejs.com/documentation/draggable/draggable-settings/releaseease "releaseEase") ## ScrollObserver refresh method refresh() Search [ScrollObserver](https://animejs.com/documentation/scroll "ScrollObserver")  [Methods](https://animejs.com/documentation/scroll/scrollobserver-methods "ScrollObserver methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [refresh()](https://animejs.com/documentation/scroll/scrollobserver-methods/refresh "refresh()") Updates the bounding values, and re-compute the [Function based value](https://animejs.com/documentation/animation/tween-value-types/function-based "Function based values") of a ScrollObserver instance. The following parameters can be refreshed when set with a [Function based value](https://animejs.com/documentation/animation/tween-value-types/function-based "Function based value"): - `repeat` - `axis` - `enter` - `leave` No need to call `.refresh()` when the container size changes, this is already handled internally. ## Returns The ScrollObserver itself ```hljs javascript import { animate, onScroll } from 'animejs'; const scrollSettings = { enter: 20, leave: 60, } const animation = animate('.square', { x: '15rem', rotate: '1turn', ease: 'linear', autoplay: onScroll({ container: '.scroll-container', enter: () => `bottom-=${scrollSettings.enter} top`, leave: () => `top+=${scrollSettings.leave} bottom`, sync: .5, debug: true, }) }); animate(scrollSettings, { enter: 90, leave: 100, loop: true, alternate: true, modifier: utils.round(0), onUpdate: () => animation._autoplay.refresh() }); ``` ```hljs html language-xml
scroll down
``` **Previous** **Next** - [link()](https://animejs.com/documentation/scroll/scrollobserver-methods/link "link()") - [revert()](https://animejs.com/documentation/scroll/scrollobserver-methods/revert "revert()") ## CSS Selector Animation CSS Selector Search [Animation](https://animejs.com/documentation/animation "Animation")  [Targets](https://animejs.com/documentation/animation/targets "Targets") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) # [CSS Selector](https://animejs.com/documentation/animation/targets/css-selector "CSS Selector") Targets one or multiple DOM Elements using a CSS selector. ## Accepts Any `String` accepted by `document.querySelectorAll()` ```hljs javascript import { animate } from 'animejs'; animate('.square', { x: '17rem' }); animate('#css-selector-id', { rotate: '1turn' }); animate('.row:nth-child(3) .square', { scale: [1, .5, 1] }); ``` ```hljs html language-xml
``` **Previous** **Next** - [Targets](https://animejs.com/documentation/animation/targets "Targets") - [DOM Elements](https://animejs.com/documentation/animation/targets/dom-elements "DOM Elements") ## Timer Reverse Method reverse() Search [Timer](https://animejs.com/documentation/timer "Timer")  [Methods](https://animejs.com/documentation/timer/timer-methods "Timer methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [reverse() V4](https://animejs.com/documentation/timer/timer-methods/reverse "reverse()") Forces the timer to play backward. ## Returns The timer itself Can be chained with other timer methods. ```hljs javascript 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); ``` ```hljs html language-xml 
      iteration time
      0
``` **Previous** **Next** - [play()](https://animejs.com/documentation/timer/timer-methods/play "play()") - [pause()](https://animejs.com/documentation/timer/timer-methods/pause "pause()") ## Stagger Value Types Stagger value types Search [Stagger](https://animejs.com/documentation/stagger "Stagger") [Since 2.0.0](https://github.com/juliangarnier/anime/releases/tag/v2.0.0) # [Stagger value types](https://animejs.com/documentation/stagger/stagger-value-types "Stagger value types") ```js hljs language-javascript stagger( ┌───────────────────┐ │ '1rem', ├─ Stagger Value └───────────────────┘ { start: 100, from: 2, reversed: false, ease: 'outQuad', grid: [8, 8], } ); ``` **In this section** - [Numerical](https://animejs.com/documentation/stagger/stagger-value-types/numerical-value "Numerical value") - [Range](https://animejs.com/documentation/stagger/stagger-value-types/range-value "Range value") **Previous** **Next** - [Timeline positions staggering](https://animejs.com/documentation/stagger/timeline-positions-staggering "Timeline positions staggering") - [Numerical value](https://animejs.com/documentation/stagger/stagger-value-types/numerical-value "Numerical value") ## Resume Animation Method resume() Search [Animation](https://animejs.com/documentation/animation "Animation")  [Methods](https://animejs.com/documentation/animation/animation-methods "Animation methods") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) # [resume() V4](https://animejs.com/documentation/animation/animation-methods/resume "resume()") Resumes the playback of a paused animation in its current direction. ## Returns The animation itself Can be chained with other animation methods. ```hljs javascript import { animate, utils, stagger } from 'animejs'; const [ $pauseButton, $alternateButton, $resumeButton ] = utils.$('.button'); const animation = animate('.square', { x: '17rem', ease: 'inOutSine', loop: true, delay: stagger(100), }); const pauseAnimation = () => animation.pause(); const alternateAnimation = () => animation.alternate(); const resumeAnimation = () => animation.resume(); $pauseButton.addEventListener('click', pauseAnimation); $alternateButton.addEventListener('click', alternateAnimation); $resumeButton.addEventListener('click', resumeAnimation); ``` ```hljs html language-xml
``` **Previous** **Next** - [alternate()](https://animejs.com/documentation/animation/animation-methods/alternate "alternate()") - [complete()](https://animejs.com/documentation/animation/animation-methods/complete "complete()") ## Resume Animation Engine resume() Search [Engine](https://animejs.com/documentation/engine "Engine")  [Methods](https://animejs.com/documentation/engine/engine-methods "Engine methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [resume()](https://animejs.com/documentation/engine/engine-methods/resume "resume()") Resumes the engine after being either paused with a call to [`engine.pause()`](https://animejs.com/documentation/engine/engine-methods/pause "engine.pause()"). ```js hljs language-javascript engine.pause(); // Pauses the engine and all animations engine.resume(); // Resumes the engine and all animations ``` ## Returns [Engine](https://animejs.com/documentation/engine "Engine") ```hljs javascript import { engine, animate, utils } from 'animejs'; const [ $container ] = utils.$('.container'); const [ $pause, $resume ] = utils.$('button'); function addAnimation() { const $particle = document.createElement('div'); $particle.classList.add('particle'); $container.appendChild($particle); animate($particle, { x: utils.random(-10, 10, 2) + 'rem', y: utils.random(-3, 3, 2) + 'rem', scale: [{ from: 0, to: 1 }, { to: 0 }], loop: true, delay: utils.random(0, 1000) }); } for (let i = 0; i < 150; i++) addAnimation(); const resumeEngine = () => engine.resume(); const pauseEngine = () => engine.pause(); $pause.addEventListener('click', pauseEngine); $resume.addEventListener('click', resumeEngine); ``` ```hljs html language-xml
``` **Previous** **Next** - [pause()](https://animejs.com/documentation/engine/engine-methods/pause "pause()") - [Engine properties](https://animejs.com/documentation/engine/engine-properties "Engine properties") ## Anime.js Timeline Refresh refresh() Search [Timeline](https://animejs.com/documentation/timeline "Timeline")  [Methods](https://animejs.com/documentation/timeline/timeline-methods "Timeline methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [refresh() V4](https://animejs.com/documentation/timeline/timeline-methods/refresh "refresh()") Re-computes the timeline children animated values defined with a [Function based value](https://animejs.com/documentation/animation/tween-value-types/function-based "Function based value") by updating their _from_ values to their current target values, and their _to_ values to their newly computed values. Only the animatable properties values are re-calculated, `duration` and `delay` cannot be refreshed. ## Returns The timeline itself Can be chained with other timeline methods. ```hljs javascript import { createTimeline, utils } from 'animejs'; const [ $refreshButton ] = utils.$('.refresh'); const tl = createTimeline({ loop: true, onLoop: self => self.refresh() }) .add('.circle', { x: () => utils.random(0, 15) + 'rem' }, 0) .add('.triangle', { x: () => utils.random(0, 15) + 'rem' }, 0) .add('.square', { x: () => utils.random(0, 15) + 'rem' }, 0); const refreshTimeline = () => tl.refresh().restart(); $refreshButton.addEventListener('click', refreshTimeline); ``` ```hljs html language-xml
``` **Previous** **Next** - [stretch()](https://animejs.com/documentation/timeline/timeline-methods/stretch "stretch()") - [Timeline properties](https://animejs.com/documentation/timeline/timeline-properties "Timeline properties") ## Draggable Stop Method stop() Search [Draggable](https://animejs.com/documentation/draggable "Draggable")  [Methods](https://animejs.com/documentation/draggable/draggable-methods "Draggable methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [stop()](https://animejs.com/documentation/draggable/draggable-methods/stop "stop()") Stop all currently running animations targeting the draggable, the container scroll animation and the draggable release animation. ## Returns The draggable itself ```hljs javascript import { createDraggable, animate, utils } from 'animejs'; const [ $stopButton ] = utils.$('.stop'); const draggable = createDraggable('.square'); animate(draggable, { x: [-100, 100], alternate: true, loop: true }); const stopDraggable = () => draggable.stop(); $stopButton.addEventListener('click', stopDraggable); ``` ```hljs html language-xml
``` **Previous** **Next** - [scrollInView()](https://animejs.com/documentation/draggable/draggable-methods/scrollinview "scrollInView()") - [reset()](https://animejs.com/documentation/draggable/draggable-methods/reset "reset()") ## Timeline Positions Staggering Timeline positions staggering Search [Stagger](https://animejs.com/documentation/stagger "Stagger") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [Timeline positions staggering V4](https://animejs.com/documentation/stagger/timeline-positions-staggering "Timeline positions staggering") The timeline `add()` position argument accepts function-based values, enabling the use of the stagger function returned by the `stagger()` method when positioning a multi-target animation. This results in each target having creating its own animation to a staggered position, increasing by a set number of milliseconds for each subsequent target. Callbacks defined on the staggered animation are also staggered and are called for every target. The `start` property of the `stagger()` parameter object allows to define the starting value of the stagger, and accepts the same values as the timeline `add()` position argument. ```hljs javascript import { createTimeline, stagger, utils } from 'animejs'; const tl = createTimeline(); const onComplete = ({ targets }) => { utils.set(targets, { color: 'var(--hex-red)' }); } tl .add('.circle', { x: '15rem', onComplete }) .label('circle completes') .add(['.triangle', '.square'], { x: '15rem', onComplete, // Callbacks are aslo staggered }, stagger(500, { start: 'circle completes-=500' })); ``` ```hljs html language-xml
``` **Previous** **Next** - [Values staggering](https://animejs.com/documentation/stagger/values-staggering "Values staggering") - [Stagger value types](https://animejs.com/documentation/stagger/stagger-value-types "Stagger value types") ## Pause Animation Engine pause() Search [Engine](https://animejs.com/documentation/engine "Engine")  [Methods](https://animejs.com/documentation/engine/engine-methods "Engine methods") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [pause()](https://animejs.com/documentation/engine/engine-methods/pause "pause()") Pauses the engine's main loop, pausing all active [Timer](https://animejs.com/documentation/timer "Timer"), [Animation](https://animejs.com/documentation/animation "Animation"), and [Timeline](https://animejs.com/documentation/timeline "Timeline") instances. Use [`engine.resume()`](https://animejs.com/documentation/engine/engine-methods/resume "engine.resume()") to restart the animations from where they paused. ```js hljs language-javascript engine.pause(); // Stops all animations engine.resume(); // Resumes all animations ``` [Timer](https://animejs.com/documentation/timer "Timer"), [Animation](https://animejs.com/documentation/animation "Animation"), or [Timeline](https://animejs.com/documentation/timeline "Timeline") can still be added when the engine is paused, but won't play until the engine is started again. ## Returns [Engine](https://animejs.com/documentation/engine "Engine") ```hljs javascript import { engine, animate, utils } from 'animejs'; const [ $container ] = utils.$('.container'); const [ $add, $pause ] = utils.$('button'); function addAnimation() { const $particle = document.createElement('div'); $particle.classList.add('particle'); $container.appendChild($particle); animate($particle, { x: utils.random(-10, 10, 2) + 'rem', y: utils.random(-3, 3, 2) + 'rem', scale: [{ from: 0, to: 1 }, { to: 0 }], loop: true, }); } let timeout = 3; let interval; function pauseEngine() { engine.pause(); $pause.setAttribute('disabled', 'true'); $pause.innerHTML = `Resume in ${timeout--} seconds`; interval = setInterval(() => { if (timeout <= 0) { clearInterval(interval); engine.resume(); $pause.removeAttribute('disabled'); $pause.innerHTML = 'Pause for 3 seconds'; timeout = 3; } else { $pause.innerHTML = `Resume in ${timeout--} seconds`; } }, 1000); } $add.addEventListener('click', addAnimation); $pause.addEventListener('click', pauseEngine); ``` ```hljs html language-xml
``` **Previous** **Next** - [update()](https://animejs.com/documentation/engine/engine-methods/update "update()") - [resume()](https://animejs.com/documentation/engine/engine-methods/resume "resume()") ## Animation Pause Control pauseOnDocumentHidden Search [Engine](https://animejs.com/documentation/engine "Engine")  [Parameters](https://animejs.com/documentation/engine/engine-parameters "Engine parameters") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [pauseOnDocumentHidden](https://animejs.com/documentation/engine/engine-parameters/pauseondocumenthidden "pauseOnDocumentHidden") Controls whether the engine pauses animations when the browser tab is hidden. When `true`, animations pause automatically when the tab loses focus. When `false`, animations will adjust their `currentTime` to catch up how long they have been idle in the background, making it looks like they never paused. ```js hljs language-javascript engine.pauseOnDocumentHidden = true; ``` ## Accepts `Boolean` ## Default `true` ```hljs javascript import { engine, utils, createTimer } from 'animejs'; const [ $globalTime ] = utils.$('.global-time'); const [ $engineTime ] = utils.$('.engine-time'); const [ $toggle ] = utils.$('.toggle'); const startTime = Date.now(); const globalTimer = setInterval(() => { $globalTime.innerHTML = Date.now() - startTime; }, 16); const engineTimer = createTimer({ onUpdate: self => $engineTime.innerHTML = self.currentTime }); const toggleSetting = () => { const isPauseWhenHidden = engine.pauseOnDocumentHidden; if (isPauseWhenHidden) { engine.pauseOnDocumentHidden = false; $toggle.innerHTML = '○ Disabled (Switch tab to see the effect)'; } else { engine.pauseOnDocumentHidden = true; $toggle.innerHTML = '● Enabled (Switch tab to see the effect)'; } } // Switch tab to see the effect $toggle.addEventListener('click', toggleSetting); ``` ```hljs html language-xml 
      global time
      0
    
      engine time
      0
``` **Previous** **Next** - [precision](https://animejs.com/documentation/engine/engine-parameters/precision "precision") - [Engine methods](https://animejs.com/documentation/engine/engine-methods "Engine methods") ## Pause Animation Method pause() Search [Animation](https://animejs.com/documentation/animation "Animation")  [Methods](https://animejs.com/documentation/animation/animation-methods "Animation methods") [Since 1.0.0](https://github.com/juliangarnier/anime/releases/tag/v1.0.0) # [pause()](https://animejs.com/documentation/animation/animation-methods/pause "pause()") Pauses a running animation. ## Returns The animation itself Can be chained with other animation methods. ```hljs javascript import { animate, utils, stagger } from 'animejs'; const [ $pauseButton ] = utils.$('.pause'); const animation = animate('.square', { x: '17rem', alternate: true, ease: 'inOutSine', loop: true, delay: stagger(100), }); const pauseAnimation = () => animation.pause(); $pauseButton.addEventListener('click', pauseAnimation); ``` ```hljs html language-xml
``` **Previous** **Next** - [reverse()](https://animejs.com/documentation/animation/animation-methods/reverse "reverse()") - [restart()](https://animejs.com/documentation/animation/animation-methods/restart "restart()") ## onSyncComplete Callback onSyncComplete Search [ScrollObserver](https://animejs.com/documentation/scroll "ScrollObserver")  [Callbacks](https://animejs.com/documentation/scroll/scrollobserver-callbacks "ScrollObserver callbacks") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [onSyncComplete](https://animejs.com/documentation/scroll/scrollobserver-callbacks/onsynccomplete "onSyncComplete") Triggers a function when the linked object synchronisation completes. ## Accepts A `Function` whose first argument returns the ScrollObserver instance ## Default `noop` ```hljs javascript import { animate, onScroll, utils } from 'animejs'; const [ $value ] = utils.$('.value'); let completions = 0; animate('.square', { x: '15rem', rotate: '1turn', ease: 'linear', autoplay: onScroll({ container: '.scroll-container', enter: 'bottom top', leave: 'center bottom', sync: .5, debug: true, onSyncComplete: () => $value.textContent = ++completions, }) }); ``` ```hljs html language-xml 
          completions
          0
``` **Previous** **Next** - [onUpdate](https://animejs.com/documentation/scroll/scrollobserver-callbacks/onupdate "onUpdate") - [ScrollObserver methods](https://animejs.com/documentation/scroll/scrollobserver-methods "ScrollObserver methods") ## onBeforeUpdate Callback onBeforeUpdate Search [Animation](https://animejs.com/documentation/animation "Animation")  [Callbacks](https://animejs.com/documentation/animation/animation-callbacks "Animation callbacks") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [onBeforeUpdate V4JS](https://animejs.com/documentation/animation/animation-callbacks/onbeforeupdate "onBeforeUpdate") Executes a function before updating the tween values, on every frames of a running animation at the specified [`frameRate`](https://animejs.com/documentation/animation/animation-playback-settings/framerate "frameRate"). ## Accepts A `Function` whose first argument returns the animation itself ## Default `noop` To change the default value globally, update the `engine.defaults` object. ```js hljs language-javascript import { engine } from 'animejs'; engine.defaults.onBeforeUpdate = self => console.log(self.id); ``` ```hljs javascript import { animate, utils } from 'animejs'; const [ $value ] = utils.$('.value'); let mult = 1; let updates = 0; const animation = animate('.circle', { x: '16rem', loopDelay: 1500, modifier: v => mult * v, loop: true, alternate: true, onBeforeUpdate: self => { $value.textContent = ++updates; // Update the mult value just before updating the tweens mult = 1 - self.iterationProgress; } }); ``` ```hljs html language-xml 
    updates
    0
``` **Previous** **Next** - [onComplete](https://animejs.com/documentation/animation/animation-callbacks/oncomplete "onComplete") - [onUpdate](https://animejs.com/documentation/animation/animation-callbacks/onupdate "onUpdate") ## Animation Pause Callback onPause Search [Animation](https://animejs.com/documentation/animation "Animation")  [Callbacks](https://animejs.com/documentation/animation/animation-callbacks "Animation callbacks") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [onPause V4JS](https://animejs.com/documentation/animation/animation-callbacks/onpause "onPause") Executes a function when a running animation is paused, either manually or automatically. An animation pauses when any of the following occurs during playback: - The `.pause()` method is called - The `.cancel()` method is called - The `.revert()` method is called - All animation tweens are overlapped by another animation with `composition: 'replace'` - All animation targets have been removed ## Accepts A `Function` whose first argument returns the animation itself ## Default `noop` To change the default value globally, update the `engine.defaults` object. ```js hljs language-javascript import { engine } from 'animejs'; engine.defaults.onPause = self => console.log(self.id); ``` ```hljs javascript import { animate, utils } from 'animejs'; const [ $animateButton, $pauseButton, $removeButton ] = utils.$('.button'); const [ $value ] = utils.$('.value'); const [ $circle ] = utils.$('.circle'); let paused = 0; let alternate = 0; let animation; const animateX = () => { alternate = !alternate; animation = animate($circle, { x: () => (alternate ? 16 : 0) + 'rem', duration: 2000, onPause: () => $value.innerHTML = ++paused, }); } const pauseAnimation = () => { if (animation) animation.pause(); } const removeTarget = () => { utils.remove($circle); } animateX(); $animateButton.addEventListener('click', animateX); $pauseButton.addEventListener('click', pauseAnimation); $removeButton.addEventListener('click', removeTarget); ``` ```hljs html language-xml 
    paused
    0
``` **Previous** **Next** - [onLoop](https://animejs.com/documentation/animation/animation-callbacks/onloop "onLoop") - [then()](https://animejs.com/documentation/animation/animation-callbacks/then "then()") ## CSS Unit Settings unit Search [Animatable](https://animejs.com/documentation/animatable "Animatable")  [Settings](https://animejs.com/documentation/animatable/animatable-settings "Animatable settings") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [unit](https://animejs.com/documentation/animatable/animatable-settings/unit "unit") Defines the unit for the animated value of the property. ## Accepts A `String` containing a valid CSS unit ```hljs javascript import { createAnimatable, utils } from 'animejs'; const $demos = document.querySelector('#docs-demos'); const [ $clock ] = utils.$('.clock'); let bounds = $clock.getBoundingClientRect(); const refreshBounds = () => bounds = $clock.getBoundingClientRect(); const clock = createAnimatable($clock, { rotate: { unit: 'rad' }, // Set the unit to 'rad' duration: 400, }); const { PI } = Math; let lastAngle = 0 let angle = PI / 2; const onMouseMove = e => { const { width, height, left, top } = bounds; const x = e.clientX - left - width / 2; const y = e.clientY - top - height / 2; const currentAngle = Math.atan2(y, x); const diff = currentAngle - lastAngle; angle += diff > PI ? diff - 2 * PI : diff < -PI ? diff + 2 * PI : diff; lastAngle = currentAngle; clock.rotate(angle); // Pass the new angle value in rad } window.addEventListener('mousemove', onMouseMove); $demos.addEventListener('scroll', refreshBounds); ``` ```hljs html language-xml
Move cursor around
``` **Previous** **Next** - [Animatable settings](https://animejs.com/documentation/animatable/animatable-settings "Animatable settings") - [duration](https://animejs.com/documentation/animatable/animatable-settings/duration "duration") ## ScrollObserver Modes ScrollObserver synchronisation modes Search [ScrollObserver](https://animejs.com/documentation/scroll "ScrollObserver") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [ScrollObserver synchronisation modes](https://animejs.com/documentation/scroll/scrollobserver-synchronisation-modes "ScrollObserver synchronisation modes") Determines the behaviour of the animation and how it is synchronised relative to the scroll progress or by meeting certain thresholds. The different synchronisation modes are defined on the `sync` property of the `onScroll()` parameters `Object`. ```js hljs language-javascript animate('.square', { x: 100, autoplay: onScroll({ container: '.container', target: '.section', axis: 'y', enter: 'bottom top', leave: 'top bottom', ┌──────────────────────────┐ │ sync: true, ├─ Synchronisation Mode └──────────────────────────┘ onEnter: () => {}, onLeave: () => {}, onUpdate: () => {}, }) }); ``` **In this section** - [Method names](https://animejs.com/documentation/scroll/scrollobserver-synchronisation-modes/method-names "Method names") - [Playback progress](https://animejs.com/documentation/scroll/scrollobserver-synchronisation-modes/playback-progress "Playback progress") - [Smooth scroll](https://animejs.com/documentation/scroll/scrollobserver-synchronisation-modes/smooth-scroll "Smooth scroll") - [Eased scroll](https://animejs.com/documentation/scroll/scrollobserver-synchronisation-modes/eased-scroll "Eased scroll") **Previous** **Next** - [ScrollObserver thresholds](https://animejs.com/documentation/scroll/scrollobserver-thresholds "ScrollObserver thresholds") - [Method names](https://animejs.com/documentation/scroll/scrollobserver-synchronisation-modes/method-names "Method names") ## Scroll Threshold Settings scrollThreshold Search [Draggable](https://animejs.com/documentation/draggable "Draggable")  [Settings](https://animejs.com/documentation/draggable/draggable-settings "Draggable settings") [Since 4.0.0](https://github.com/juliangarnier/anime/releases/tag/v4.0.0) # [scrollThreshold](https://animejs.com/documentation/draggable/draggable-settings/scrollthreshold "scrollThreshold") Specifies the number of pixels the draggable element must cross beyond the area bounds before the container starts scrolling automatically. ## Accepts - A `Number` - A `Function` that returns a `Number` When defined using a `Function`, the value will be automatically refreshed every time the container or target element is resized. It can also be refreshed manually using the [`refresh()`](https://animejs.com/documentation/draggable/draggable-methods/refresh) method. ## Default `20` ```hljs javascript import { createDraggable } from 'animejs'; createDraggable('.square', { container: '.scroll-container', scrollThreshold: 12, }); ``` ```hljs html language-xml
``` **Previous** **Next** - [dragSpeed](https://animejs.com/documentation/draggable/draggable-settings/dragspeed "dragSpeed") - [scrollSpeed](https://animejs.com/documentation/draggable/draggable-settings/scrollspeed "scrollSpeed")