Direction parameter is now properly changed when animation reverse

Author: juliangarnier

documentation/examples/anime-timeline.html

@@ -106,6 +106,7 @@
         <button class="pause">Pause</button>
         <button class="reverse">Reverse</button>
         <button class="restart">Restart</button>
+        <label>Is reversed : <input class="is-reversed"></input></label>
       </div>
       <div class="timeline">
         <input class="progress" type="range" min="0" max="100" step=".1" value="0">
@@ -122,17 +123,20 @@
 
   var els = document.querySelectorAll('.el');
   var controlsProgressEl = document.querySelector('.controls .progress');
+  var isReversedEl = document.querySelector('.is-reversed');
 
   window.tl = anime.timeline({
     targets: els,
     duration: 800,
     delay: function(el, i) { return 75 * i; },
     update: function(anim) {
       controlsProgressEl.value = anim.progress;
+      isReversedEl.value = anim.reversePlayback;
     },
     loopComplete: (a) => console.log('TL loop completed'),
     autoplay: true,
-    easing: 'easeOutQuad'
+    easing: 'easeOutQuad',
+    direction: 'alternate'
   });
 
   document.querySelector('.controls .play').onclick = tl.play;

documentation/index.html

@@ -2683,7 +2683,6 @@ <h3 class="demo-title">Reverse</h3>
   targets: '.reverse-anim-demo .el',
   translateX: 270,
   loop: true,
-  direction: 'alternate',
   delay: function(el, i) { return i * 200; },
   easing: 'easeInOutSine'
 });

lib/anime.es.js

@@ -938,6 +938,10 @@ function anime(params) {
   var promise = makePromise(instance);
 
   function toggleInstanceDirection() {
+    var direction = instance.direction;
+    if (direction !== 'alternate') {
+      instance.direction = direction !== 'normal' ? 'normal' : 'reverse';
+    }
     instance.reversed = !instance.reversed;
     children.forEach(function (child) { return child.reversed = instance.reversed; });
   }
@@ -1136,8 +1140,8 @@ function anime(params) {
 
   instance.play = function() {
     if (!instance.paused) { return; }
+    if (instance.completed) { instance.reset(); }
     instance.paused = false;
-    instance.completed = false;
     activeInstances.push(instance);
     resetTime();
     if (!raf) { engine(); }

lib/anime.js

@@ -940,6 +940,10 @@ function anime(params) {
   var promise = makePromise(instance);
 
   function toggleInstanceDirection() {
+    var direction = instance.direction;
+    if (direction !== 'alternate') {
+      instance.direction = direction !== 'normal' ? 'normal' : 'reverse';
+    }
     instance.reversed = !instance.reversed;
     children.forEach(function (child) { return child.reversed = instance.reversed; });
   }
@@ -1138,8 +1142,8 @@ function anime(params) {
 
   instance.play = function() {
     if (!instance.paused) { return; }
+    if (instance.completed) { instance.reset(); }
     instance.paused = false;
-    instance.completed = false;
     activeInstances.push(instance);
     resetTime();
     if (!raf) { engine(); }

lib/anime.min.js

@@ -918,6 +918,10 @@ function anime(params = {}) {
   let promise = makePromise(instance);
 
   function toggleInstanceDirection() {
+    const direction = instance.direction;
+    if (direction !== 'alternate') {
+      instance.direction = direction !== 'normal' ? 'normal' : 'reverse';
+    }
     instance.reversed = !instance.reversed;
     children.forEach(child => child.reversed = instance.reversed);
   }
@@ -1116,8 +1120,8 @@ function anime(params = {}) {
 
   instance.play = function() {
     if (!instance.paused) return;
+    if (instance.completed) instance.reset();
     instance.paused = false;
-    instance.completed = false;
     activeInstances.push(instance);
     resetTime();
     if (!raf) engine();