getting closer

ionic/collide/tick.js

@@ -26,8 +26,6 @@ function tick(timestamp) {
      the first RAF tick pass so that elements being immediately consecutively animated -- instead of simultaneously animated
      by the same Collide call -- are properly batched into the same initial RAF tick and consequently remain in sync thereafter. */
 
-  var percentCompleteStop = false;
-
   if (timestamp) {
     /* We ignore RAF's high resolution timestamp since it can be significantly offset when the browser is
        under high stress; we opt for choppiness over allowing the browser to drop huge chunks of frames. */
@@ -84,14 +82,12 @@ function tick(timestamp) {
          Accordingly, we ensure that percentComplete does not exceed 1. */
       var percentComplete;
       if (opts.percentComplete !== undefined) {
-        percentCompleteStop = true;
         percentComplete = opts.percentComplete;
-        opts.percentComplete = undefined;
-
       } else {
         percentComplete = Math.min((timeCurrent - timeStart) / opts.duration, 1);
       }
 
+
       /**********************
          Element Iteration
       **********************/
@@ -266,7 +262,7 @@ function tick(timestamp) {
       }
 
       /* If this call has finished tweening, pass its index to completeCall() to handle call cleanup. */
-      if (percentComplete === 1) {
+      if (percentComplete === 1 || opts.percentComplete !== undefined) {
         completeCall(i);
       }
 

ionic/components/app/test/animations/main.html

@@ -8,12 +8,12 @@
 
     <div class="red square" style="position:absolute; width:100px; height:100px; background:red; top: 0; left: 0;"></div>
     <div class="green square" style="position:absolute; width:100px; height:100px; background:green; top: 0; left: 100px;"></div>
-    <!-- <div class="blue square" style="position:absolute; width:100px; height:100px; background:blue; top: 0; left: 200px;"></div> -->
+    <div class="blue square" style="position:absolute; width:100px; height:100px; background:blue; top: 0; left: 200px;"></div>
 
   </div>
 
   <p>
-    <input type="range" (input)="percent($event)" value="50" min="0" max="100" style="width:200px">
+    <input type="range" (input)="percent($event)" value="0" min="0" max="100" style="width:200px">
   </p>
 
   <p>

ionic/components/app/test/animations/main.js

@@ -16,13 +16,15 @@ class IonicApp {
   fadeOut() {
     this.animation = new Animation();
     this.animation.elements( document.querySelectorAll('.square') );
-    this.animation.debug(2);
 
-    this.animation.duration(500);
+    this.animation.duration(2000);
     this.animation.easing('swing');
 
-    this.animation.property('opacity', 0);
+    this.animation.property('opacity', 0.2);
     this.animation.property('translateX', '100px');
+    this.animation.property('translateY', '100px');
+    this.animation.property('rotateZ', '180deg');
+    this.animation.property('scale', '0.5');
 
     let q = this.animation.start();
 
@@ -34,13 +36,15 @@ class IonicApp {
   fadeIn() {
     this.animation = new Animation();
     this.animation.elements( document.querySelectorAll('.square') );
-    this.animation.debug(2);
 
-    this.animation.duration(2500);
+    this.animation.duration(2000);
     this.animation.easing('swing');
 
     this.animation.property('opacity', 1);
     this.animation.property('translateX', '0px');
+    this.animation.property('translateY', '0px');
+    this.animation.property('rotateZ', '0deg');
+    this.animation.property('scale', '1');
 
     let q = this.animation.start();
 
@@ -57,6 +61,18 @@ class IonicApp {
     let ratio = parseFloat(ev.srcElement.value) / 100;
     console.log('percent ratio', ratio);
 
+    this.animation = new Animation();
+    this.animation.elements( document.querySelectorAll('.square') );
+
+    this.animation.duration(2000);
+    this.animation.easing('swing');
+
+    this.animation.property('opacity', 0.2);
+    this.animation.property('translateX', '100px');
+    this.animation.property('translateY', '100px');
+    this.animation.property('rotateZ', '180deg');
+    this.animation.property('scale', '0.5');
+
     this.animation.percent(ratio);
   }
 
@@ -68,12 +84,13 @@ class IonicApp {
     var elements = document.querySelectorAll('.square');
     Velocity(elements, {
       opacity: 0,
-      translateX: '100px'
+      translateX: '100px',
-    }, 5000);
+      rotateZ: '90deg'
+    }, 2000);
 
-    setTimeout(function() {
+    // setTimeout(function() {
-      Velocity(elements, "stop");
+    //   Velocity(elements, "stop");
-    }, 1000)
+    // }, 1000)
   }
 
 }