animejs 4.0.1 → 4.1.0

package/README.md

@@ -20,6 +20,33 @@
   <img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/juliangarnier?style=flat-square&logo=github">
 </p>
 
+## 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
+
+<p>
+<a target="_blank" href="https://ice.io/?ref=animejs">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/ice-open-network-logomark.png">
+    <img align="center" src="./assets/sponsors/ice-open-network-logomark-dark.png" width="250">
+  </picture>
+</a>
+</p>
+
+### Silver sponsors
+
+<p>
+<a target="_blank" href="https://www.lambdatest.com?utm_source=animeJS&utm_medium=organic&utm_campaign=july_08&utm_term=sk&utm_content=opensource">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/lambdatest-logomark.png">
+    <img align="center" src="./assets/sponsors/lambdatest-logomark-dark.png" width="150">
+  </picture>
+</a>
+</p>
+
 ## Usage
 
 Anime.js V4 works by importing ES modules like so:
@@ -56,52 +83,9 @@ animate('.square', {
 
 The full documentation is available [here](https://animejs.com/documentation).
 
-## Our sponsors
+## V3 Migration guide
 
-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
-
-<table>
-  <tr>
-    <td>
-      <a target="_blank" href="https://huly.io/?ref=animejs">
-        <picture>
-          <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/huly-logomark.svg">
-          <img align="center" src="./assets/sponsors/huly-logomark-dark.svg" width="128">
-        </picture>
-      </a>
-    </td>
-    <td>
-      <a target="_blank" href="https://ice.io/?ref=animejs">
-        <picture>
-          <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/ice-open-network-logomark.svg">
-          <img align="center" src="./assets/sponsors/ice-open-network-logomark-dark.svg" width="128">
-        </picture>
-      </a>
-    </td>
-    <td>
-      <a target="_blank" href="https://github.com/sponsors/juliangarnier">
-        <picture>
-          <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/placeholder.svg">
-          <img align="center" src="./assets/sponsors/placeholder-dark.svg" width="128">
-        </picture>
-      </a>
-    </td>
-  </tr>
-  <tr>
-    <td align="center">
-      <a target="_blank" href="https://huly.io/?ref=animejs">Huly</a>
-    </td>
-    <td align="center">
-      <a target="_blank" href="https://ice.io/?ref=animejs">Ice Open Network</a>
-    </td>
-    <td align="center">
-      <a target="_blank" href="https://github.com/sponsors/juliangarnier">Your logo here</a>
-    </td>
-  </tr>
-</table>
+You can find the v3 to v4 migration guide [here](https://github.com/juliangarnier/anime/wiki/Migrating-from-v3-to-v4).
 
 ## NPM development scripts
 
@@ -117,173 +101,4 @@ Then, execute the following scripts with `npm run <script>`.
 | `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)