animejs 4.0.1 → 4.0.2

package/README.md

@@ -56,12 +56,30 @@ animate('.square', {
 
 The full documentation is available [here](https://animejs.com/documentation).
 
+## V3 Migration guide
+
+You can find the v3 to v4 migration guide [here](https://github.com/juliangarnier/anime/wiki/Migrating-from-v3-to-v4).
+
+## NPM development scripts
+
+First, run `npm i` to install all the necessary packages.
+Then, execute the following scripts with `npm run <script>`.
+
+| script | action |
+| ------ | ------ |
+| `dev` | Watch any changes in `src/` and compiles the esm version to `lib/anime.esm.js` |
+| `dev-types` | Same as `dev`, but also run TypeScript and generate the `types/index.d.ts` file |
+| `build` | Generate types definition and compiles ESM / UMD / IIFE versions to `lib/` |
+| `test-browser` | Start a local server and start all browser related tests |
+| `test-node` | Start all Node related tests |
+| `open-examples` | Start a local server to browse the examples locally |
+
 ## Our sponsors
 
 Anime.js is 100% free and is only made possible with the help of our sponsors.
 Help the project become sustainable by sponsoring us on <a target="_blank" href="https://github.com/sponsors/juliangarnier">GitHub Sponsors</a>.
 
-## Platinum sponsors
+### Platinum sponsors
 
 <table>
   <tr>
@@ -103,187 +121,4 @@ Help the project become sustainable by sponsoring us on <a target="_blank" href=
   </tr>
 </table>
 
-## NPM development scripts
-
-First, run `npm i` to install all the necessary packages.
-Then, execute the following scripts with `npm run <script>`.
-
-| script | action |
-| ------ | ------ |
-| `dev` | Watch any changes in `src/` and compiles the esm version to `lib/anime.esm.js` |
-| `dev-types` | Same as `dev`, but also run TypeScript and generate the `types/index.d.ts` file |
-| `build` | Generate types definition and compiles ESM / UMD / IIFE versions to `lib/` |
-| `test-browser` | Start a local server and start all browser related tests |
-| `test-node` | Start all Node related tests |
-| `open-examples` | Start a local server to browse the examples locally |
-
-## V4 API breaking changes overview
-
-### Animations
-
-```diff
-- import anime from 'animejs';
-+ import { animate, createSpring, utils } from 'animejs';
-
-- anime({
--   targets: 'div',
-+ animate('div', {
-    translateX: 100,
-      rotate: {
--     value: 360,
-+     to: 360,
--     easing: 'spring(.7, 80, 10, .5)',
-+     ease: createSpring({ mass: .7, damping: 80, stiffness: 10, velocity: .5}),
-    },
--   easing: 'easeinOutExpo',
-+   ease: 'inOutExpo',
--   easing: () => t => Math.cos(t),
-+   ease: t => Math.cos(t),
--   direction: 'reverse',
-+   reversed: true,
--   direction: 'alternate',
-+   alternate: true,
--   loop: 1,
-+   loop: 0,
--   round: 100,
-+   modifier: utils.round(2),
--   begin: () => {},
-+   onBegin: () => {},
--   update: () => {},
-+   onUpdate: () => {},
--   change: () => {},
-+   onRender: () => {},
--   changeBegin: () => {},
--   changeComplete: () => {},
--   loopBegin: () => {},
--   loopComplete: () => {},
-+   onLoop: () => {},
--   complete: () => {},
-+   onComplete: () => {},
-  });
-```
-
-### Promises
-
-```diff
-- import anime from 'animejs';
-+ import { animate, utils } from 'animejs';
-
-- anime({ targets: target, prop: x }).finished.then(() => {});
-+ animate(target, { prop: x }).then(() => {});
-```
-
-### Timers
-
-```diff
-- import anime from 'animejs';
-+ import { createTimer } from 'animejs';
-
-- anime({
-+ createTimer({
--   duration: Infinity,
--   update: () => {},
-+   onUpdate: () => {},
-  });
-```
-
-### Timelines
-
-```diff
-- import anime from 'animejs';
-+ import { createTimeline, stagger } from 'animejs';
-
-- anime.timeline({
-+ createTimeline({
--   duration: 500,
--   easing: 'easeInOutQuad',
-+   defaults: {
-+     duration: 500,
-+     ease: 'inOutQuad',
-+   }
--   loop: 2,
-+   loop: 1,
-- }).add({
--   targets: 'div',
-+ }).add('div', {
-    rotate: 90,
-  })
-- .add('.target:nth-child(1)', { opacity: 0, onComplete }, 0)
-- .add('.target:nth-child(2)', { opacity: 0, onComplete }, 100)
-- .add('.target:nth-child(3)', { opacity: 0, onComplete }, 200)
-- .add('.target:nth-child(4)', { opacity: 0, onComplete }, 300)
-+ .add('.target', { opacity: 0, onComplete }, stagger(100))
-```
-
-### Stagger
-
-```diff
-- import anime from 'animejs';
-+ import { animate, stagger } from 'animejs';
-
-- anime({
--   targets: 'div',
-+ animate('div', {
--   translateX: anime.stagger(100),
-+   translateX: stagger(100),
--   delay: anime.stagger(100, { direction: 'reversed' }),
-+   translateX: stagger(100, { reversed: true }),
-  });
-```
-
-### SVG
-
-```diff
-- import anime from 'animejs';
-+ import { animate, svg } from 'animejs';
-
-- const path = anime.path('path');
-+ const { x, y, angle } = svg.createMotionPath('path');
-
-- anime({
--   targets: '#shape1',
-+ animate('#shape1', {
--   points: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369',
-+   points: svg.morphTo('#shape2'),
--   strokeDashoffset: [anime.setDashoffset, 0],
-+   strokeDashoffset: svg.drawLine(),
--   translateX: path('x'),
--   translateY: path('y'),
--   rotate: path('angle'),
-+   translateX: x,
-+   translateY: y,
-+   rotate: angle,
-  });
-```
-
-### Utils
-
-```diff
-- import anime from 'animejs';
-+ import { utils } from 'animejs';
-
-- const value = anime.get('#target1', 'translateX');
-+ const value = utils.get('#target1', 'translateX');
-
-- anime.set('#target1', { translateX: 100 });
-+ utils.set('#target1', { translateX: 100 });
-
-- anime.remove('#target1');
-+ utils.remove('#target1');
-
-- const rounded = anime.round(value);
-+ const rounded = utils.round(value, 0);
-```
-
-### Engine
-
-```diff
-- import anime from 'animejs';
-+ import { engine } from 'animejs';
-
-- anime.suspendWhenDocumentHidden = false;
-+ engine.pauseWhenHidden = false;
-
-- anime.speed = .5;
-+ engine.playbackRate = .5;
-```
+© [Julian Garnier](http://juliangarnier.com) | [MIT License](LICENSE.md)