Merge pull request #673 from juliangarnier/v3.2.0

V3.2.0

Author: juliangarnier

documentation/examples/anime-ease-visualizer.html

@@ -17,7 +17,7 @@
   <link rel="icon" type="image/png" href="../assets/img/favicon.png">
   <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
-  <script src="../../lib/anime.min.js"></script>
+  <!-- <script src="../../lib/anime.min.js"></script> -->
   <style>
     .easings {
       display: flex;
@@ -335,9 +335,16 @@
       <button value="easeInOutBack" >Back</button>
       <button value="easeInOutBounce" >Bounce</button>
       <button value="easeInOutElastic" >Elastic</button>
+      <label>Steps</label>
+      <button value="steps(2)" >steps(2)</button>
+      <button value="steps(5)" >steps(5)</button>
+      <button value="steps(10)" >steps(10)</button>
+      <button value="steps(20)" >steps(20)</button>
     </div>
   </div>
-  <script>
+  <script type="module">
+
+  import anime from '../../src/index.js';
 
   var pathEl = document.querySelector('.curve');
   var presetsEls = document.querySelectorAll('.options button');
@@ -407,8 +414,6 @@
 
   presetsEls[0].click();
 
-  pathEl.setAttribute('d', getCoordinates(presetsEls[0].value));
-
   </script>
 </body>
 </html>

documentation/index.html

@@ -2663,21 +2663,7 @@ <h3 class="demo-title">Reverse</h3>
       <button class="reverse">Reverse</button>
     </div>
   </div>
-
-  <script>
-
-  var reverseAnimDemo = anime({
-    targets: '.reverse-anim-demo .el',
-    translateX: 270,
-    duration: 2000,
-    delay: function(el, i) { return i * 200; }
-  });
-
-  document.querySelector('.reverse-anim-demo .reverse').onclick = function() {
-    reverseAnimDemo.reverse();
-  }
-
-  var reverseAnim = function() {
+  <script>var reverseAnim = function() {
 /*DEMO*/
 var animation = anime({
   targets: '.reverse-anim-demo .el',

lib/anime.es.js

@@ -1,6 +1,6 @@
 /*
- * anime.js v3.1.0
- * (c) 2019 Julian Garnier
+ * anime.js v3.2.0
+ * (c) 2020 Julian Garnier
  * Released under the MIT license
  * animejs.com
  */
@@ -30,7 +30,7 @@ var defaultTweenSettings = {
   round: 0
 };
 
-var validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective'];
+var validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective', 'matrix', 'matrix3d'];
 
 // Caching
 
@@ -132,7 +132,7 @@ function spring(string, duration) {
 function steps(steps) {
   if ( steps === void 0 ) steps = 10;
 
-  return function (t) { return Math.round(t * steps) * (1 / steps); };
+  return function (t) { return Math.ceil((minMax(t, 0.000001, 1)) * steps) * (1 / steps); };
 }
 
 // BezierEasing https://github.com/gre/bezier-easing
@@ -1133,6 +1133,7 @@ function anime(params) {
 
   instance.reverse = function() {
     toggleInstanceDirection();
+    instance.completed = instance.reversed ? false : true;
     resetTime();
   };
 
@@ -1262,7 +1263,7 @@ function timeline(params) {
   return tl;
 }
 
-anime.version = '3.1.0';
+anime.version = '3.2.0';
 anime.speed = 1;
 anime.running = activeInstances;
 anime.remove = removeTargets;

lib/anime.js

@@ -1,6 +1,6 @@
 /*
- * anime.js v3.1.0
- * (c) 2019 Julian Garnier
+ * anime.js v3.2.0
+ * (c) 2020 Julian Garnier
  * Released under the MIT license
  * animejs.com
  */
@@ -32,7 +32,7 @@ var defaultTweenSettings = {
   round: 0
 };
 
-var validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective'];
+var validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective', 'matrix', 'matrix3d'];
 
 // Caching
 
@@ -134,7 +134,7 @@ function spring(string, duration) {
 function steps(steps) {
   if ( steps === void 0 ) steps = 10;
 
-  return function (t) { return Math.round(t * steps) * (1 / steps); };
+  return function (t) { return Math.ceil((minMax(t, 0.000001, 1)) * steps) * (1 / steps); };
 }
 
 // BezierEasing https://github.com/gre/bezier-easing
@@ -1135,6 +1135,7 @@ function anime(params) {
 
   instance.reverse = function() {
     toggleInstanceDirection();
+    instance.completed = instance.reversed ? false : true;
     resetTime();
   };
 
@@ -1264,7 +1265,7 @@ function timeline(params) {
   return tl;
 }
 
-anime.version = '3.1.0';
+anime.version = '3.2.0';
 anime.speed = 1;
 anime.running = activeInstances;
 anime.remove = removeTargets;

lib/anime.min.js

@@ -1,6 +1,6 @@
 {
   "name": "animejs",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "homepage": "http://animejs.com",
   "repository": "juliangarnier/anime",
   "description": "JavaScript animation engine",

package.json

@@ -23,7 +23,7 @@ const defaultTweenSettings = {
   round: 0
 }
 
-const validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective'];
+const validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective', 'matrix', 'matrix3d'];
 
 // Caching
 
@@ -123,7 +123,7 @@ function spring(string, duration) {
 // Basic steps easing implementation https://developer.mozilla.org/fr/docs/Web/CSS/transition-timing-function
 
 function steps(steps = 10) {
-  return t => Math.round(t * steps) * (1 / steps);
+  return t => Math.ceil((minMax(t, 0.000001, 1)) * steps) * (1 / steps);
 }
 
 // BezierEasing https://github.com/gre/bezier-easing
@@ -1115,6 +1115,7 @@ function anime(params = {}) {
 
   instance.reverse = function() {
     toggleInstanceDirection();
+    instance.completed = instance.reversed ? false : true;
     resetTime();
   }
 
@@ -1241,7 +1242,7 @@ function timeline(params = {}) {
   return tl;
 }
 
-anime.version = '3.1.0';
+anime.version = '3.2.0';
 anime.speed = 1;
 anime.running = activeInstances;
 anime.remove = removeTargets;