Reverse animation will now respect watched elements

scripts/sequence.js

@@ -1440,6 +1440,8 @@ function defineSequence(imagesLoaded, Hammer) {
        * @param {Boolean} ignorePhaseThreshold - if true, ignore the threshold
        * between phases (breaks reversal of animations but may be used when
        * skipping navigation etc)
+       * @returns {Number} maxWatchedTotal - The new total length
+       * (duration + delay) for watched elements when reversed
        */
       reverseProperties: function(phaseProperties, phaseDelay, phaseThresholdTime, ignorePhaseThreshold) {
 
@@ -1453,8 +1455,11 @@ function defineSequence(imagesLoaded, Hammer) {
             timingFunctionReversed,
             duration,
             delay,
+            total,
             maxTotal,
-            totals = [];
+            maxWatchedTotal,
+            totals = [],
+            watchedTotals = [];
 
         for (i = 0; i < noOfPhaseElements; i++) {
           el = phaseElements[i];
@@ -1463,19 +1468,30 @@ function defineSequence(imagesLoaded, Hammer) {
           duration = convertTimeToMs(getStyle(el, Modernizr.prefixed("transitionDuration")));
           delay = convertTimeToMs(getStyle(el, Modernizr.prefixed("transitionDelay")));
 
+          // Save the total
+          total = duration + delay;
+
           // Delay elements in relation to the length of other elements in the
           // phase eg. If one element A transitions for 1s and element B 2s
           // element A should be delayed by 1s (element B length - element A length).
-          delay = stepDurations.maxTotal - (duration + delay);
+          delay = stepDurations.maxTotal - total;
 
           // Delay this phase's elements so they animate in relation to the
           // other phase
           if (ignorePhaseThreshold !== true) {
             delay += phaseDelay;
           }
 
+          // Update the total with the new delay
+          total = duration + delay;
+
           // Save the total of the reversed animation
-          totals.push(delay + duration);
+          totals.push(total);
+
+          // Save the total of the reversed animation for watched elements only
+          if (el.getAttribute("data-seq") !== null) {
+            watchedTotals.push(total);
+          }
 
           // Get the timing-function and reverse it
           timingFunction = getStyle(el, Modernizr.prefixed("transitionTimingFunction"));
@@ -1488,6 +1504,10 @@ function defineSequence(imagesLoaded, Hammer) {
         // Get the longest total and delay of the reversed animations
         maxTotal = Math.max.apply(Math, totals);
 
+        // Get the longest total and delay of the reversed animations (for
+        // watched elements only)
+        maxWatchedTotal = Math.max.apply(Math, watchedTotals);
+
         // Remove the reversed transition properties from each element once it
         // has finished animating; allowing for the inherited styles to take
         // effect again.
@@ -1501,7 +1521,7 @@ function defineSequence(imagesLoaded, Hammer) {
           });
         }, maxTotal + phaseThresholdTime);
 
-        return maxTotal;
+        return maxWatchedTotal;
       },
 
       /**

src/sequence.js

@@ -1440,6 +1440,8 @@ function defineSequence(imagesLoaded, Hammer) {
        * @param {Boolean} ignorePhaseThreshold - if true, ignore the threshold
        * between phases (breaks reversal of animations but may be used when
        * skipping navigation etc)
+       * @returns {Number} maxWatchedTotal - The new total length
+       * (duration + delay) for watched elements when reversed
        */
       reverseProperties: function(phaseProperties, phaseDelay, phaseThresholdTime, ignorePhaseThreshold) {
 
@@ -1453,8 +1455,11 @@ function defineSequence(imagesLoaded, Hammer) {
             timingFunctionReversed,
             duration,
             delay,
+            total,
             maxTotal,
-            totals = [];
+            maxWatchedTotal,
+            totals = [],
+            watchedTotals = [];
 
         for (i = 0; i < noOfPhaseElements; i++) {
           el = phaseElements[i];
@@ -1463,19 +1468,30 @@ function defineSequence(imagesLoaded, Hammer) {
           duration = convertTimeToMs(getStyle(el, Modernizr.prefixed("transitionDuration")));
           delay = convertTimeToMs(getStyle(el, Modernizr.prefixed("transitionDelay")));
 
+          // Save the total
+          total = duration + delay;
+
           // Delay elements in relation to the length of other elements in the
           // phase eg. If one element A transitions for 1s and element B 2s
           // element A should be delayed by 1s (element B length - element A length).
-          delay = stepDurations.maxTotal - (duration + delay);
+          delay = stepDurations.maxTotal - total;
 
           // Delay this phase's elements so they animate in relation to the
           // other phase
           if (ignorePhaseThreshold !== true) {
             delay += phaseDelay;
           }
 
+          // Update the total with the new delay
+          total = duration + delay;
+
           // Save the total of the reversed animation
-          totals.push(delay + duration);
+          totals.push(total);
+
+          // Save the total of the reversed animation for watched elements only
+          if (el.getAttribute("data-seq") !== null) {
+            watchedTotals.push(total);
+          }
 
           // Get the timing-function and reverse it
           timingFunction = getStyle(el, Modernizr.prefixed("transitionTimingFunction"));
@@ -1488,6 +1504,10 @@ function defineSequence(imagesLoaded, Hammer) {
         // Get the longest total and delay of the reversed animations
         maxTotal = Math.max.apply(Math, totals);
 
+        // Get the longest total and delay of the reversed animations (for
+        // watched elements only)
+        maxWatchedTotal = Math.max.apply(Math, watchedTotals);
+
         // Remove the reversed transition properties from each element once it
         // has finished animating; allowing for the inherited styles to take
         // effect again.
@@ -1501,7 +1521,7 @@ function defineSequence(imagesLoaded, Hammer) {
           });
         }, maxTotal + phaseThresholdTime);
 
-        return maxTotal;
+        return maxWatchedTotal;
       },
 
       /**

tests/themes/test-theme/css/sequence-theme.test-theme.css

@@ -53,15 +53,16 @@
   border: red solid 1px;
   left: 100%;
   transition-duration: .5s;
+  /*transition-delay: 1s;*/
   transition-timing-function: linear;
 }
 
 #sequence .boxb {
   top: 100px;
 }
 
-#sequence .seq-out .boxb {
-
+#sequence .boxb {
+  /*transition-delay: 0s;*/
 }
 
 #sequence .seq-in .box {
@@ -72,5 +73,4 @@
 #sequence .seq-out .box {
   left: 0;
   margin-left: -100px;
-  transition-delay: .25s;
 }

tests/themes/test-theme/index.html

@@ -27,15 +27,15 @@
       <ul class="seq-canvas">
         <li id="step1">
           <div class="box box1" data-seq>Box 1</div>
-          <!-- <div class="box boxb" data-seq>Box 1b </div> -->
+          <!-- <div class="box boxb">Box 1b </div> -->
         </li>
         <li id="step2">
           <div class="box box2" data-seq>Box 2</div>
-          <!-- <div class="box boxb" data-seq>Box 2b</div> -->
+          <!-- <div class="box boxb">Box 2b</div> -->
         </li>
         <li id="step3">
           <div class="box box3" data-seq>Box 3</div>
-          <!-- <div class="box boxb" data-seq>Box 3b</div> -->
+          <!-- <div class="box boxb">Box 3b</div> -->
         </li>
       </ul>
     </div>

tests/themes/test-theme/scripts/sequence-theme.test-theme.js

@@ -27,7 +27,7 @@ var options = {
   // autoPlayDirection: -1,
   // autoPlayInterval: 2000,
   // autoPlayDelay: 1000,
-  phaseThreshold: false,
+  phaseThreshold: 1000,
   ignorePhaseThresholdWhenSkipped: true,
   preloader: false,
   keyNavigation: true,