animejs 3.2.2 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/LICENSE.md +1 -1
  2. package/README.md +260 -85
  3. package/lib/anime.cjs +9 -0
  4. package/lib/anime.esm.js +7590 -0
  5. package/lib/anime.esm.min.js +9 -0
  6. package/lib/anime.iife.js +9 -0
  7. package/lib/anime.iife.min.js +9 -0
  8. package/lib/anime.min.cjs +9 -0
  9. package/lib/anime.umd.js +9 -0
  10. package/lib/anime.umd.min.js +9 -0
  11. package/package.json +43 -19
  12. package/types/index.d.ts +1019 -0
  13. package/types/index.js +6874 -0
  14. package/lib/anime.es.js +0 -1311
  15. package/lib/anime.js +0 -1313
  16. package/lib/anime.min.js +0 -8
package/LICENSE.md CHANGED
@@ -1,6 +1,6 @@
1
1
  The MIT License
2
2
 
3
- Copyright (c) 2019 Julian Garnier
3
+ Copyright (c) 2025 Julian Garnier
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
6
 
package/README.md CHANGED
@@ -1,114 +1,289 @@
1
- > [!IMPORTANT]
2
- > ## 🎉 Anime.js V4 is now available in early access 🎉
3
- >
4
- > After years in the making, Anime.js V4 is finally available in early access for my **[GitHub Sponsors](https://github.com/sponsors/juliangarnier)**!
5
-
6
- <h1 align="center">
7
- <a href="https://animejs.com"><img src="/documentation/assets/img/animejs-v3-header-animation.gif" width="250"/></a>
8
- <br>
9
- anime.js
10
- </h1>
11
-
12
- <h4 align="center">JavaScript animation engine | <a href="https://animejs.com" target="_blank">animejs.com</a></h4>
1
+ # Anime.js
13
2
 
14
3
  <p align="center">
15
- <a href="https://www.npmjs.com/package/animejs" rel="nofollow"><img src="https://camo.githubusercontent.com/011820ee25bf1d3ddaf635d869903b98eccaeae7/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f616e696d656a732e7376673f7374796c653d666c61742d737175617265" alt="npm version" data-canonical-src="https://img.shields.io/npm/v/animejs.svg?style=flat-square" style="max-width:100%;"></a>
16
- <a href="https://www.npmjs.com/package/animejs" rel="nofollow"><img src="https://camo.githubusercontent.com/3e9b69d51aee25fad784a3097676696096621d47/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f616e696d656a732e7376673f7374796c653d666c61742d737175617265" alt="npm downloads" data-canonical-src="https://img.shields.io/npm/dm/animejs.svg?style=flat-square" style="max-width:100%;"></a>
4
+ <picture align="center">
5
+ <source media="(prefers-color-scheme: dark)" srcset="./assets/images/animejs-v4-logo-animation-dark.gif">
6
+ <img align="center" alt="Anime.js V4 logo animation" src="./assets/images/animejs-v4-logo-animation.gif" width="560">
7
+ </picture>
17
8
  </p>
18
9
 
19
- <blockquote align="center">
20
- <em>Anime.js</em> (<code>/ˈæn.ə.meɪ/</code>) is a lightweight JavaScript animation library with a simple, yet powerful API.<br>
10
+ <p align="center">
11
+ <strong>
12
+ <em>Anime.js</em> is a fast, multipurpose and lightweight JavaScript animation library with a simple, yet powerful API.<br>
21
13
  It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
22
- </blockquote>
14
+ </strong>
15
+ </p>
23
16
 
24
17
  <p align="center">
25
- <a href="#getting-started">Getting started</a>&nbsp;|&nbsp;<a href="#documentation">Documentation</a>&nbsp;|&nbsp;<a href="#demos-and-examples">Demos and examples</a>&nbsp;|&nbsp;<a href="#browser-support">Browser support</a>
18
+ <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/animejs?style=flat-square&logo=npm">
19
+ <img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/animejs?style=flat-square&logo=jsdeliver">
20
+ <img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/juliangarnier?style=flat-square&logo=github">
26
21
  </p>
27
22
 
28
- ## Getting started
23
+ ## Usage
24
+
25
+ Anime.js V4 works by importing ES modules like so:
29
26
 
30
- ### Download
27
+ <table>
28
+ <tr>
29
+ <td>
31
30
 
32
- Via npm
31
+ ```javascript
32
+ import {
33
+ animate,
34
+ stagger,
35
+ } from 'animejs';
33
36
 
34
- ```bash
35
- $ npm install animejs --save
37
+ animate('.square', {
38
+ x: 320,
39
+ rotate: { from: -180 },
40
+ duration: 1250,
41
+ delay: stagger(65, { from: 'center' }),
42
+ ease: 'inOutQuint',
43
+ loop: true,
44
+ alternate: true
45
+ });
36
46
  ```
37
47
 
38
- or manual [download](https://github.com/juliangarnier/anime/archive/master.zip).
48
+ </td>
49
+ <td>
50
+ <img align="center" alt="Anime.js code example" src="./assets/images/usage-example-result.gif">
51
+ </td>
52
+ </tr>
53
+ </table>
39
54
 
40
- ### Usage
55
+ ## V4 Documentation
41
56
 
42
- #### ES6 modules
57
+ The full documentation is available [here](https://animejs.com/documentation).
43
58
 
44
- ```javascript
45
- import anime from 'animejs/lib/anime.es.js';
59
+ ## Our sponsors
60
+
61
+ Anime.js is 100% free and is only made possible with the help of our sponsors.
62
+ Help the project become sustainable by sponsoring us on <a target="_blank" href="https://github.com/sponsors/juliangarnier">GitHub Sponsors</a>.
63
+
64
+ ## Platinum sponsors
65
+
66
+ <table>
67
+ <tr>
68
+ <td>
69
+ <a target="_blank" href="https://huly.io/?ref=animejs">
70
+ <picture>
71
+ <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/huly-logomark.svg">
72
+ <img align="center" src="./assets/sponsors/huly-logomark-dark.svg" width="128">
73
+ </picture>
74
+ </a>
75
+ </td>
76
+ <td>
77
+ <a target="_blank" href="https://ice.io/?ref=animejs">
78
+ <picture>
79
+ <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/ice-open-network-logomark.svg">
80
+ <img align="center" src="./assets/sponsors/ice-open-network-logomark-dark.svg" width="128">
81
+ </picture>
82
+ </a>
83
+ </td>
84
+ <td>
85
+ <a target="_blank" href="https://github.com/sponsors/juliangarnier">
86
+ <picture>
87
+ <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/placeholder.svg">
88
+ <img align="center" src="./assets/sponsors/placeholder-dark.svg" width="128">
89
+ </picture>
90
+ </a>
91
+ </td>
92
+ </tr>
93
+ <tr>
94
+ <td align="center">
95
+ <a target="_blank" href="https://huly.io/?ref=animejs">Huly</a>
96
+ </td>
97
+ <td align="center">
98
+ <a target="_blank" href="https://ice.io/?ref=animejs">Ice Open Network</a>
99
+ </td>
100
+ <td align="center">
101
+ <a target="_blank" href="https://github.com/sponsors/juliangarnier">Your logo here</a>
102
+ </td>
103
+ </tr>
104
+ </table>
105
+
106
+ ## NPM development scripts
107
+
108
+ First, run `npm i` to install all the necessary packages.
109
+ Then, execute the following scripts with `npm run <script>`.
110
+
111
+ | script | action |
112
+ | ------ | ------ |
113
+ | `dev` | Watch any changes in `src/` and compiles the esm version to `lib/anime.esm.js` |
114
+ | `dev-types` | Same as `dev`, but also run TypeScript and generate the `types/index.d.ts` file |
115
+ | `build` | Generate types definition and compiles ESM / UMD / IIFE versions to `lib/` |
116
+ | `test-browser` | Start a local server and start all browser related tests |
117
+ | `test-node` | Start all Node related tests |
118
+ | `open-examples` | Start a local server to browse the examples locally |
119
+
120
+ ## V4 API breaking changes overview
121
+
122
+ ### Animations
123
+
124
+ ```diff
125
+ - import anime from 'animejs';
126
+ + import { animate, createSpring, utils } from 'animejs';
127
+
128
+ - anime({
129
+ - targets: 'div',
130
+ + animate('div', {
131
+ translateX: 100,
132
+ rotate: {
133
+ - value: 360,
134
+ + to: 360,
135
+ - easing: 'spring(.7, 80, 10, .5)',
136
+ + ease: createSpring({ mass: .7, damping: 80, stiffness: 10, velocity: .5}),
137
+ },
138
+ - easing: 'easeinOutExpo',
139
+ + ease: 'inOutExpo',
140
+ - easing: () => t => Math.cos(t),
141
+ + ease: t => Math.cos(t),
142
+ - direction: 'reverse',
143
+ + reversed: true,
144
+ - direction: 'alternate',
145
+ + alternate: true,
146
+ - loop: 1,
147
+ + loop: 0,
148
+ - round: 100,
149
+ + modifier: utils.round(2),
150
+ - begin: () => {},
151
+ + onBegin: () => {},
152
+ - update: () => {},
153
+ + onUpdate: () => {},
154
+ - change: () => {},
155
+ + onRender: () => {},
156
+ - changeBegin: () => {},
157
+ - changeComplete: () => {},
158
+ - loopBegin: () => {},
159
+ - loopComplete: () => {},
160
+ + onLoop: () => {},
161
+ - complete: () => {},
162
+ + onComplete: () => {},
163
+ });
46
164
  ```
47
165
 
48
- #### CommonJS
166
+ ### Promises
49
167
 
50
- ```javascript
51
- const anime = require('animejs');
168
+ ```diff
169
+ - import anime from 'animejs';
170
+ + import { animate, utils } from 'animejs';
171
+
172
+ - anime({ targets: target, prop: x }).finished.then(() => {});
173
+ + animate(target, { prop: x }).then(() => {});
52
174
  ```
53
175
 
54
- #### File include
176
+ ### Timers
55
177
 
56
- Link `anime.min.js` in your HTML :
178
+ ```diff
179
+ - import anime from 'animejs';
180
+ + import { createTimer } from 'animejs';
57
181
 
58
- ```html
59
- <script src="anime.min.js"></script>
182
+ - anime({
183
+ + createTimer({
184
+ - duration: Infinity,
185
+ - update: () => {},
186
+ + onUpdate: () => {},
187
+ });
60
188
  ```
61
189
 
62
- ### Hello world
190
+ ### Timelines
63
191
 
64
- ```javascript
65
- anime({
66
- targets: 'div',
67
- translateX: 250,
68
- rotate: '1turn',
69
- backgroundColor: '#FFF',
70
- duration: 800
71
- });
192
+ ```diff
193
+ - import anime from 'animejs';
194
+ + import { createTimeline, stagger } from 'animejs';
195
+
196
+ - anime.timeline({
197
+ + createTimeline({
198
+ - duration: 500,
199
+ - easing: 'easeInOutQuad',
200
+ + defaults: {
201
+ + duration: 500,
202
+ + ease: 'inOutQuad',
203
+ + }
204
+ - loop: 2,
205
+ + loop: 1,
206
+ - }).add({
207
+ - targets: 'div',
208
+ + }).add('div', {
209
+ rotate: 90,
210
+ })
211
+ - .add('.target:nth-child(1)', { opacity: 0, onComplete }, 0)
212
+ - .add('.target:nth-child(2)', { opacity: 0, onComplete }, 100)
213
+ - .add('.target:nth-child(3)', { opacity: 0, onComplete }, 200)
214
+ - .add('.target:nth-child(4)', { opacity: 0, onComplete }, 300)
215
+ + .add('.target', { opacity: 0, onComplete }, stagger(100))
216
+ ```
217
+
218
+ ### Stagger
219
+
220
+ ```diff
221
+ - import anime from 'animejs';
222
+ + import { animate, stagger } from 'animejs';
223
+
224
+ - anime({
225
+ - targets: 'div',
226
+ + animate('div', {
227
+ - translateX: anime.stagger(100),
228
+ + translateX: stagger(100),
229
+ - delay: anime.stagger(100, { direction: 'reversed' }),
230
+ + translateX: stagger(100, { reversed: true }),
231
+ });
232
+ ```
233
+
234
+ ### SVG
235
+
236
+ ```diff
237
+ - import anime from 'animejs';
238
+ + import { animate, svg } from 'animejs';
239
+
240
+ - const path = anime.path('path');
241
+ + const { x, y, angle } = svg.createMotionPath('path');
242
+
243
+ - anime({
244
+ - targets: '#shape1',
245
+ + animate('#shape1', {
246
+ - points: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369',
247
+ + points: svg.morphTo('#shape2'),
248
+ - strokeDashoffset: [anime.setDashoffset, 0],
249
+ + strokeDashoffset: svg.drawLine(),
250
+ - translateX: path('x'),
251
+ - translateY: path('y'),
252
+ - rotate: path('angle'),
253
+ + translateX: x,
254
+ + translateY: y,
255
+ + rotate: angle,
256
+ });
72
257
  ```
73
258
 
74
- ## [Documentation](https://animejs.com/documentation/)
75
-
76
- * [Targets](https://animejs.com/documentation/#cssSelector)
77
- * [Properties](https://animejs.com/documentation/#cssProperties)
78
- * [Property parameters](https://animejs.com/documentation/#duration)
79
- * [Animation parameters](https://animejs.com/documentation/#direction)
80
- * [Values](https://animejs.com/documentation/#unitlessValue)
81
- * [Keyframes](https://animejs.com/documentation/#animationKeyframes)
82
- * [Staggering](https://animejs.com/documentation/#staggeringBasics)
83
- * [Timeline](https://animejs.com/documentation/#timelineBasics)
84
- * [Controls](https://animejs.com/documentation/#playPause)
85
- * [Callbacks and promises](https://animejs.com/documentation/#update)
86
- * [SVG Animations](https://animejs.com/documentation/#motionPath)
87
- * [Easing functions](https://animejs.com/documentation/#linearEasing)
88
- * [Helpers](https://animejs.com/documentation/#remove)
89
-
90
- ## [Demos and examples](http://codepen.io/collection/b392d3a52d6abf5b8d9fda4e4cab61ab/)
91
-
92
- * [CodePen demos and examples](http://codepen.io/collection/b392d3a52d6abf5b8d9fda4e4cab61ab/)
93
- * [juliangarnier.com](http://juliangarnier.com)
94
- * [animejs.com](https://animejs.com)
95
- * [Moving letters](http://tobiasahlin.com/moving-letters/) by [@tobiasahlin](https://twitter.com/tobiasahlin)
96
- * [Gradient topography animation](https://tympanus.net/Development/GradientTopographyAnimation/) by [@crnacura](https://twitter.com/crnacura)
97
- * [Organic shape animations](https://tympanus.net/Development/OrganicShapeAnimations/) by [@crnacura](https://twitter.com/crnacura)
98
- * [Pieces slider](https://tympanus.net/Tutorials/PiecesSlider/) by [@lmgonzalves](https://twitter.com/lmgonzalves)
99
- * [Staggering animations](https://codepen.io/juliangarnier/pen/4fe31bbe8579a256e828cd4d48c86182?editors=0100)
100
- * [Easings animations](https://codepen.io/juliangarnier/pen/444ed909fd5de38e3a77cc6e95fc1884)
101
- * [Sphere animation](https://codepen.io/juliangarnier/pen/b3bb8ca599ad0f9d00dd044e56cbdea5?editors=0010)
102
- * [Layered animations](https://codepen.io/juliangarnier/pen/6ca836535cbea42157d1b8d56d00be84?editors=0010)
103
- * [anime.js logo animation](https://codepen.io/juliangarnier/pen/d43e8ec355c30871cbe775193255d6f6?editors=0010)
104
-
105
-
106
- ## Browser support
107
-
108
- | Chrome | Safari | IE / Edge | Firefox | Opera |
109
- | --- | --- | --- | --- | --- |
110
- | 24+ | 8+ | 11+ | 32+ | 15+ |
111
-
112
- ## <a href="https://animejs.com"><img src="/documentation/assets/img/animejs-v3-logo-animation.gif" width="150" alt="anime-js-v3-logo"/></a>
113
-
114
- [Website](https://animejs.com/) | [Documentation](https://animejs.com/documentation/) | [Demos and examples](http://codepen.io/collection/b392d3a52d6abf5b8d9fda4e4cab61ab/) | [MIT License](LICENSE.md) | © 2019 [Julian Garnier](http://juliangarnier.com).
259
+ ### Utils
260
+
261
+ ```diff
262
+ - import anime from 'animejs';
263
+ + import { utils } from 'animejs';
264
+
265
+ - const value = anime.get('#target1', 'translateX');
266
+ + const value = utils.get('#target1', 'translateX');
267
+
268
+ - anime.set('#target1', { translateX: 100 });
269
+ + utils.set('#target1', { translateX: 100 });
270
+
271
+ - anime.remove('#target1');
272
+ + utils.remove('#target1');
273
+
274
+ - const rounded = anime.round(value);
275
+ + const rounded = utils.round(value, 0);
276
+ ```
277
+
278
+ ### Engine
279
+
280
+ ```diff
281
+ - import anime from 'animejs';
282
+ + import { engine } from 'animejs';
283
+
284
+ - anime.suspendWhenDocumentHidden = false;
285
+ + engine.pauseWhenHidden = false;
286
+
287
+ - anime.speed = .5;
288
+ + engine.playbackRate = .5;
289
+ ```