animejs 2.0.0 → 2.2.0

package/README.md

@@ -1,6 +1,6 @@
-# [anime.js](http://anime-js.com) ![](http://img.badgesize.io/juliangarnier/anime/v2.0/anime.min.js.svg?style=flat&color=18FF92)
+# [anime.js](http://animejs.com) ![](http://img.badgesize.io/juliangarnier/anime/v2.0/anime.min.js.svg?style=flat&color=18FF92)
 
-<img src="documentation/assets/img/readme/animejs-logo.gif" width="100%" />
+<img src="http://animejs.com/documentation/assets/img/readme/animejs-logo.gif" width="100%" />
 
 >*Anime* `(/ˈæn.ə.meɪ/)` is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.
 
@@ -20,7 +20,7 @@
 
 * [CodePen demos and examples](http://codepen.io/collection/b392d3a52d6abf5b8d9fda4e4cab61ab/)
 * [juliangarnier.com](http://juliangarnier.com)
-* [anime-js.com](http://anime-js.com)
+* [animejs.com](http://animejs.com)
 * [kenzo.com/en/thejunglebook](https://kenzo.com/en/thejunglebook)
 * [Stress test](http://codepen.io/juliangarnier/pen/9aea7f045d7db301eab41bc09dcfc04d?editors=0010)
 
@@ -72,13 +72,13 @@ The `targets` property defines the elements or JS `Object`s to animate.
 
 | Types | Examples
 | --- | ---
-| CSS Selectors | `'div'`, `'.item'`, `'path'`
+| CSS Selectors | `'div'`, `'.item'`, `'path'`, `'#el path'` ...
 | DOM Element | `document.querySelector('.item')`
 | NodeList | `document.querySelectorAll('.item')`
 | `Object` | `{prop1: 100, prop2: 200}`
 | `Array` | `['div', '.item', domNode]`
 
-➜ [Targets examples](http://anime-js.com/documentation/#cssSelector)
+➜ [Targets examples](http://animejs.com/documentation/#cssSelector)
 
 ## Animatable properties
 
@@ -90,11 +90,11 @@ The `targets` property defines the elements or JS `Object`s to animate.
 | DOM attributes | Any DOM attributes containing numerical values
 | SVG attributes | Any SVG attributes containing numerical values
 
-➜ [Animatable properties examples](http://anime-js.com/documentation/#cssProperties)
+➜ [Animatable properties examples](http://animejs.com/documentation/#cssProperties)
 
 ### CSS
 
-<img src="documentation/assets/img/readme/prop-css.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/prop-css.gif" width="332" />
 
 Any CSS properties can be animated:
 
@@ -107,11 +107,11 @@ anime({
 });
 ```
 
-➜ [CSS properties example](http://anime-js.com/documentation/#cssProperties)
+➜ [CSS properties example](http://animejs.com/documentation/#cssProperties)
 
 ### Individual CSS transforms
 
-<img src="documentation/assets/img/readme/prop-transforms.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/prop-transforms.gif" width="332" />
 
 CSS transforms can be animated individually:
 
@@ -119,16 +119,16 @@ CSS transforms can be animated individually:
 anime({
   targets: 'div',
   translateX: 250, // Animate all divs translateX property to 250px
-  scale: 2, // Animate all divs scale to 1.5
+  scale: 2, // Animate all divs scale to 2
   rotate: '1turn' // Animate all divs rotation to 1 turn
 });
 ```
 
-➜ [CSS Transforms example](http://anime-js.com/documentation/#CSStransforms)
+➜ [CSS Transforms example](http://animejs.com/documentation/#CSStransforms)
 
 ### JavaScript Object properties
 
-<img src="documentation/assets/img/readme/prop-js-obj.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/prop-js-obj.gif" width="332" />
 
 Any `Object` property containing a numerical value can be animated:
 
@@ -145,11 +145,11 @@ anime({
 });
 ```
 
-➜ [Object properties example](http://anime-js.com/documentation/#JSobjectProp)
+➜ [Object properties example](http://animejs.com/documentation/#JSobjectProp)
 
 ### DOM Attributes
 
-<img src="documentation/assets/img/readme/prop-dom-attr.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/prop-dom-attr.gif" width="332" />
 
 Any DOM Attribute containing a numerical values can be animated:
 
@@ -165,11 +165,11 @@ anime({
 });
 ```
 
-➜ [DOM Attributes example](http://anime-js.com/documentation/#domAttributes)
+➜ [DOM Attributes example](http://animejs.com/documentation/#domAttributes)
 
 ### SVG Attributes
 
-<img src="documentation/assets/img/readme/prop-svg-attr.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/prop-svg-attr.gif" width="332" />
 
 Any SVG Attribute containing a numerical values can be animated:
 
@@ -186,11 +186,11 @@ anime({
 });
 ```
 
-➜ [SVG Attributes example](http://anime-js.com/documentation/#svgAttributes)
+➜ [SVG Attributes example](http://animejs.com/documentation/#svgAttributes)
 
 ## Property parameters
 
-<img src="documentation/assets/img/readme/prop-parameters.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/prop-parameters.gif" width="332" />
 
 Defines duration, delay and easing for each property animations.<br>
 Can be set globally, or individually to each properties:
@@ -224,11 +224,11 @@ anime({
 });
 ```
 
-➜ [Property parameters examples](http://anime-js.com/documentation/#duration)
+➜ [Property parameters examples](http://animejs.com/documentation/#duration)
 
 ## Function based property parameters
 
-<img src="documentation/assets/img/readme/fb-parameters.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/fb-parameters.gif" width="332" />
 
 Get different property parameters for every target of the animation.<br>
 The function accepts 3 arguments: `target`, `index`, `targetsLength`.
@@ -236,7 +236,6 @@ The function accepts 3 arguments: `target`, `index`, `targetsLength`.
 ```javascript
 anime({
   targets: 'div',
-  translateX: 100,
   translateX: 250,
   rotate: 180,
   duration: function(target) {
@@ -254,11 +253,11 @@ anime({
 });
 ```
 
-➜ [Function based parameters examples](http://anime-js.com/documentation/#functionBasedDuration)
+➜ [Function based parameters examples](http://animejs.com/documentation/#functionBasedDuration)
 
 ## Animation parameters
 
-<img src="documentation/assets/img/readme/anim-parameters.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/anim-parameters.gif" width="332" />
 
 Parameters relative to the animation to specify the direction, the number of loops or autoplay.
 
@@ -274,12 +273,12 @@ anime({
   translateX: 100,
   duration: 2000,
   loop: 3, // Play the animation 3 times
-  direction: 'reverse' // Play the animation in reverse
+  direction: 'reverse', // Play the animation in reverse
   autoplay: false // Animation paused by default
 });
 ```
 
-➜ [Animation parameters examples](http://anime-js.com/documentation/#alternate)
+➜ [Animation parameters examples](http://animejs.com/documentation/#alternate)
 
 ## Property values
 
@@ -291,11 +290,11 @@ Start value is the original target value, or default transforms value.
 | Types | Examples | Infos
 | --- | --- | ---
 | Number | `100` | Automatically add original or default unit if needed
-| String | `'10em'`, `'1turn'`, `'M21 1v160'` | Must contains at least one numerical value
+| String | `'10em'`, `'1turn'`, `'M21 1v160'`, `'50%'` | Must contains at least one numerical value
 | Relative values | `'+=100px'`, `'-=20em'`, `'*=4'` | Add, subtract or multiply the original property value
 | Colors | `'#FFF'`, `'rgb(255,0,0)'`, `'hsl(100, 20%, 80%)'` | Accepts 3 or 6 hex digit, rgb, or hsl values
 
-➜ [Values examples](http://anime-js.com/documentation/#unitlessValue)
+➜ [Values examples](http://animejs.com/documentation/#unitlessValue)
 
 ```javascript
 anime({
@@ -310,7 +309,7 @@ anime({
 
 ### From > To values
 
-<img src="documentation/assets/img/readme/value-from-to.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/value-from-to.gif" width="332" />
 
 Force the animation to start at a certain value.
 
@@ -325,14 +324,14 @@ anime({
 });
 ```
 
-➜ [Specific initial value example](http://anime-js.com/documentation/#specificInitialValue)
+➜ [Specific initial value example](http://animejs.com/documentation/#specificInitialValue)
 
 ### Function based values
 
-<img src="documentation/assets/img/readme/value-fb.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/value-fb.gif" width="332" />
 
 Same as [function based property parameters](#function-based-property-parameters).<br>
-Get different values for every target of the animation.<br>
+Get different values for every target and property of the animation.<br>
 The function accepts 3 arguments: `target`, `index`, `targetsLength`.
 
 ```javascript
@@ -348,17 +347,16 @@ anime({
     return (l - i) + .25;
   },
   rotate: function() { return anime.random(-360, 360); },
-  duration: function() { return anime.random(1200, 1800); },
   duration: function() { return anime.random(800, 1600); },
   delay: function() { return anime.random(0, 1000); }
 });
 ```
 
-➜ [Function based value example](http://anime-js.com/documentation/#functionBasedPropVal)
+➜ [Function based value example](http://animejs.com/documentation/#functionBasedPropVal)
 
 ### Keyframes
 
-<img src="documentation/assets/img/readme/value-keyframes.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/value-keyframes.gif" width="332" />
 
 Keyframes are defined using an `Array` of property Object.<br>
 Instance's `duration` is divided by the number of keyframes of each properties if not specified.
@@ -391,13 +389,13 @@ anime({
 });
 ```
 
-➜ [Specific keyframes properties example](http://anime-js.com/documentation/#keyframes)
+➜ [Specific keyframes properties example](http://animejs.com/documentation/#keyframes)
 
 ## Timeline
 
 ### Basic timeline
 
-<img src="documentation/assets/img/readme/timeline.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/timeline.gif" width="332" />
 
 Play animations in sequence by creating a timeline:
 
@@ -435,7 +433,7 @@ myTimeline
 
 Access timeline children animations with `myTimeline.children`
 
-➜ [Basic timeline example](http://anime-js.com/documentation/#basicTimeline)
+➜ [Basic timeline example](http://animejs.com/documentation/#basicTimeline)
 
 ### Timeline animations offsets
 
@@ -443,15 +441,15 @@ Access timeline children animations with `myTimeline.children`
 
 #### Relative offset
 
-<img src="documentation/assets/img/readme/timeline-relative.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/timeline-relative.gif" width="332" />
 
 Defines starting time relative to the previous animations duration.
 
-| Types | Examples | Infos 
-| --- | --- | --- 
-| `+=` | `'+=100'` | Starts 100ms after the previous animation ends 
-| `-=` | `'-=100'` | Starts 100ms before the previous animation ends 
-| `*=` | `'*=2'` | Starts at 2 times the previous animations duration 
+| Types | Examples | Infos
+| --- | --- | ---
+| `+=` | `'+=100'` | Starts 100ms after the previous animation ends
+| `-=` | `'-=100'` | Starts 100ms before the previous animation ends
+| `*=` | `'*=2'` | Starts at 2 times the previous animations duration
 
 ```javascript
 myTimeline
@@ -471,11 +469,11 @@ myTimeline
   });
 ```
 
-➜ [Relative offset example](http://anime-js.com/documentation/#relativeOffset)
+➜ [Relative offset example](http://animejs.com/documentation/#relativeOffset)
 
 #### Absolute offset
 
-<img src="documentation/assets/img/readme/timeline-absolute.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/timeline-absolute.gif" width="332" />
 
 Defines an absolute starting time on the timeline with a number.
 
@@ -498,7 +496,7 @@ myTimeline
   });
 ```
 
-➜ [Absolute offset example](http://anime-js.com/documentation/absoluteOffset)
+➜ [Absolute offset example](http://animejs.com/documentation/absoluteOffset)
 
 ## Playback controls
 
@@ -506,7 +504,7 @@ Play, pause, restart, seek animations or timelines.
 
 ### Play / Pause
 
-<img src="documentation/assets/img/readme/playback-play-pause.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/playback-play-pause.gif" width="332" />
 
 ```javascript
 var playPauseAnim = anime({
@@ -521,11 +519,11 @@ playPauseAnim.play(); //  Manually play
 playPauseAnim.pause(); //  Manually pause
 ```
 
-➜ [Play / Pause example](http://anime-js.com/documentation/#playPause)
+➜ [Play / Pause example](http://animejs.com/documentation/#playPause)
 
 ### Restart
 
-<img src="documentation/assets/img/readme/playback-restart.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/playback-restart.gif" width="332" />
 
 ```javascript
 var restartAnim = anime({
@@ -539,28 +537,28 @@ var restartAnim = anime({
 restartAnim.restart(); // Restart the animation and reset the loop count / current direction
 ```
 
-➜ [Restart example](http://anime-js.com/documentation/#restartAnim)
+➜ [Restart example](http://animejs.com/documentation/#restartAnim)
 
 ### Reverse
 
-<img src="documentation/assets/img/readme/playback-reverse.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/playback-reverse.gif" width="332" />
 
 ```javascript
-var restartAnim = anime({
+var reverseAnim = anime({
   targets: 'div',
   translateX: 250,
   direction: 'alternate',
   loop: true
 });
 
-restartAnim.reverse(); // Change the animation direction
+reverseAnim.reverse(); // Change the animation direction
 ```
 
-➜ [Reverse example](http://anime-js.com/documentation/#reverseAnim)
+➜ [Reverse example](http://animejs.com/documentation/#reverseAnim)
 
 ### Seek
 
-<img src="documentation/assets/img/readme/playback-seek.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/playback-seek.gif" width="332" />
 
 Change animations or timelines current time.
 
@@ -576,11 +574,11 @@ var seekAnim = anime({
 seekAnim.seek(500); // Set the animation current time to 500ms
 ```
 
-➜ [Seek example](http://anime-js.com/documentation/#seekAnim)
+➜ [Seek example](http://animejs.com/documentation/#seekAnim)
 
 ## Callbacks
 
-<img src="documentation/assets/img/readme/callbacks-all.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/callbacks-all.gif" width="332" />
 
 Execute a function at the beginning, during or when an animation or timeline is completed.
 
@@ -590,7 +588,7 @@ Execute a function at the beginning, during or when an animation or timeline is
 | begin | `function` | animation `Object` | Called after animation delay is over
 | complete | `function` | animation `Object` | Called only after all the loops are completed
 
-➜ [Callbacks examples](http://anime-js.com/documentation/#allCallbacks)
+➜ [Callbacks examples](http://animejs.com/documentation/#allCallbacks)
 
 ### Update
 
@@ -598,7 +596,7 @@ Execute a function at the beginning, during or when an animation or timeline is
 
 ```javascript
 var myAnimation = anime({
-  targets: '#callbacks .el',
+  targets: '#update .el',
   translateX: 250,
   delay: 1000,
   update: function(anim) {
@@ -608,7 +606,7 @@ var myAnimation = anime({
 });
 ```
 
-➜ [Update example](http://anime-js.com/documentation/#update)
+➜ [Update example](http://animejs.com/documentation/#update)
 
 ### Begin
 
@@ -627,7 +625,7 @@ var myAnimation = anime({
 
 Check if the animation has begun with `myAnimation.began`, return `true` or `false`.
 
-➜ [Begin example](http://anime-js.com/documentation/#begin)
+➜ [Begin example](http://animejs.com/documentation/#begin)
 
 ### Run
 
@@ -635,7 +633,7 @@ Check if the animation has begun with `myAnimation.began`, return `true` or `fal
 
 ```javascript
 var myAnimation = anime({
-  targets: '#begin .el',
+  targets: '#run .el',
   translateX: 250,
   delay: 1000,
   run: function(anim) {
@@ -644,7 +642,7 @@ var myAnimation = anime({
 });
 ```
 
-➜ [Run example](http://anime-js.com/documentation/#run)
+➜ [Run example](http://animejs.com/documentation/#run)
 
 ### Complete
 
@@ -654,7 +652,7 @@ var myAnimation = anime({
 var myAnimation = anime({
   targets: '#complete .el',
   translateX: 250,
-  Complete: function(anim) {
+  complete: function(anim) {
     console.log(anim.completed);
   }
 });
@@ -662,19 +660,19 @@ var myAnimation = anime({
 
 Check if the animation has finished with `myAnimation.completed`, return `true` or `false`.
 
-➜ [Complete example](http://anime-js.com/documentation/#complete)
+➜ [Complete example](http://animejs.com/documentation/#complete)
 
 ## Promises
 
 `myAnimation.finished` returns a Promise object which will resolve once the animation has finished running.
 
-➜ [Promises example](http://anime-js.com/documentation/#finishedPromise)
+➜ [Promises example](http://animejs.com/documentation/#finishedPromise)
 
 ## SVG
 
 ### Motion path
 
-<img src="documentation/assets/img/readme/svg-motion-path.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/svg-motion-path.gif" width="332" />
 
 Translate and rotate DOM elements along an SVG path:
 
@@ -690,16 +688,16 @@ var motionPath = anime({
 });
 ```
 
-➜ [Motion path example](http://anime-js.com/documentation/#motionPath)
+➜ [Motion path example](http://animejs.com/documentation/#motionPath)
 
 ### Morphing
 
-<img src="documentation/assets/img/readme/svg-morphing.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/svg-morphing.gif" width="332" />
 
 Animate the transition between two SVG shapes:
 
 ```html
-<svg class=".shape" width="128" height="128" viewBox="0 0 128 128">
+<svg class="shape" width="128" height="128" viewBox="0 0 128 128">
   <polygon points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"></polygon>
 </svg>
 ```
@@ -713,22 +711,22 @@ var svgAttributes = anime({
 
 Shapes need to have the same number of points.
 
-➜ [Morphing example](http://anime-js.com/documentation/#morphing)
+➜ [Morphing example](http://animejs.com/documentation/#morphing)
 
 ### Line drawing
 
-<img src="documentation/assets/img/readme/svg-line-drawing.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/svg-line-drawing.gif" width="332" />
 
 Line drawing animation of an SVG shape:
 
 ```javascript
 anime({
   targets: '.shape path',
-	strokeDashoffset: [anime.setDashoffset, 0]
+  strokeDashoffset: [anime.setDashoffset, 0]
 });
 ```
 
-➜ [Line drawing example](http://anime-js.com/documentation/#lineDrawing)
+➜ [Line drawing example](http://animejs.com/documentation/#lineDrawing)
 
 ## Easing functions
 
@@ -757,15 +755,15 @@ Penner's equations:
 | easeInBack | easeOutBack | easeInOutBack
 | easeInElastic | easeOutElastic | easeInOutElastic
 
-➜ [Built in easing functions examples](http://anime-js.com/documentation/#penner)
+➜ [Built in easing functions examples](http://animejs.com/documentation/#penner)
 
 Usage:
 
 ```javascript
 anime({
   targets: 'div',
-	translateX: 100,
-	easing: 'easeOutExpo' // Default 'easeOutElastic'
+  translateX: 100,
+  easing: 'easeOutExpo' // Default 'easeOutElastic'
 });
 ```
 
@@ -774,13 +772,13 @@ Elasticity of Elastic easings can be configured with the `elasticity` parameters
 ```javascript
 anime({
   targets: 'div',
-	translateX: 100,
-	easing: 'easeOutElastic',
-	elasticity: 600 // Default 500, range [0-1000]
+  translateX: 100,
+  easing: 'easeOutElastic',
+  elasticity: 600 // Default 500, range [0-1000]
 });
 ```
 
-➜ [Elasticity examples](http://anime-js.com/documentation/#elasticity)
+➜ [Elasticity examples](http://animejs.com/documentation/#elasticity)
 
 ### Custom Bézier curves
 
@@ -789,14 +787,14 @@ Define a Bézier curve with an `Array` of 4 coordinates:
 ```javascript
 anime({
   targets: 'div',
-	translateX: 100,
-	easing: [.91,-0.54,.29,1.56],
+  translateX: 100,
+  easing: [.91,-0.54,.29,1.56]
 });
 ```
 
-Custom Bézier curves coordinates can be generated here https://matthewlein.com/ceaser/
+Custom Bézier curves coordinates can be generated here <https://matthewlein.com/ceaser/>
 
-➜ [Custom Bézier curves example](http://anime-js.com/documentation/#customBezier)
+➜ [Custom Bézier curves example](http://animejs.com/documentation/#customBezier)
 
 ### Defining custom functions
 
@@ -811,8 +809,8 @@ anime.easings['myCustomEasingName'] = function(t) {
 // Usage
 anime({
   targets: 'div',
-	translateX: 100,
-	easing: 'myCustomEasingName'
+  translateX: 100,
+  easing: 'myCustomEasingName'
 });
 
 // add custom Bézier curve function
@@ -821,12 +819,12 @@ anime.easings['myCustomCurve'] = anime.bezier([.91,-0.54,.29,1.56]);
 // Usage
 anime({
   targets: 'div',
-	translateX: 100,
-	easing: 'myCustomCurve'
+  translateX: 100,
+  easing: 'myCustomCurve'
 });
 ```
 
-➜ [Custom easing functions example](http://anime-js.com/documentation/#customEasingFunction)
+➜ [Custom easing functions example](http://animejs.com/documentation/#customEasingFunction)
 
 ## Helpers
 
@@ -851,7 +849,7 @@ anime.running;
 Remove one or multiple targets from the animation.
 
 ```javascript
-anime.remove('.item-2'); // Remove all divs with the class '.item-2'
+anime.remove('.item-2'); // Remove all elements with the class 'item-2'
 ```
 
 ### anime.getValue(target, property)
@@ -871,7 +869,7 @@ Accepts either a DOM node or CSS selector.
 var path = anime.path('svg path', 'translateX'); // Return path(attribute)
 ```
 
-➜ [Motion path example](http://anime-js.com/documentation/#motionPath)
+➜ [Motion path example](http://animejs.com/documentation/#motionPath)
 
 ### anime.setDashoffset(pathEl)
 
@@ -881,11 +879,11 @@ Sets the 'stroke-dasharray' to the total path length and return its value.
 ```javascript
 anime({
   targets: '.shape path',
-	strokeDashoffset: [anime.pathDashoffset, 0]
+  strokeDashoffset: [anime.pathDashoffset, 0]
 });
 ```
 
-➜ [Line drawing example](http://anime-js.com/documentation/#lineDrawing)
+➜ [Line drawing example](http://animejs.com/documentation/#lineDrawing)
 
 ### anime.easings
 
@@ -912,7 +910,7 @@ var timeline = anime.timeline();
 timeline.add([instance1, instance2, ...]);
 ```
 
-➜ [Timeline examples](http://anime-js.com/documentation/#basicTimeline)
+➜ [Timeline examples](http://animejs.com/documentation/#basicTimeline)
 
 ### anime.random(x, y)
 
@@ -926,4 +924,4 @@ anime.random(10, 40); // Will return a random number between 10 and 40
 
 [MIT License](LICENSE.md). © 2017 [Julian Garnier](http://juliangarnier.com).
 
-Thanks to [Animate Plus](https://github.com/bendc/animateplus) and [Velocity](https://github.com/julianshapiro/velocity) that inspired `anime.js` API, [BezierEasing](https://github.com/gre/bezier-easing) and [jQuery UI](https://jqueryui.com/) for the easing system. [Tim Branyen](https://github.com/tbranyen) For the Promise implementation. 
+Thanks to [Animate Plus](https://github.com/bendc/animateplus) and [Velocity](https://github.com/julianshapiro/velocity) that inspired `anime.js` API, [BezierEasing](https://github.com/gre/bezier-easing) and [jQuery UI](https://jqueryui.com/) for the easing system. [Tim Branyen](https://github.com/tbranyen) For the Promise implementation.