Timeline parameters inheritance #152

juliangarnier · Sep 17, 2017 · 1fede5d · 1fede5d
1 parent b029bd2
commit 1fede5d
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 6 deletions.
diff --git a/anime.js b/anime.js
@@ -898,7 +898,8 @@
     tl.duration = 0;
     tl.add = function(instancesParams) {
       tl.children.forEach( i => { i.began = true; i.completed = true; });
-      toArray(instancesParams).forEach(insParams => {
+      toArray(instancesParams).forEach(instanceParams => {
+        let insParams = mergeObjects(instanceParams, params);
         const tlDuration = tl.duration;
         const insOffset = insParams.offset;
         insParams.autoplay = false;

diff --git a/anime.min.js b/anime.min.js
diff --git a/documentation/examples/anime-DOM-stress-test.html b/documentation/examples/anime-DOM-stress-test.html
@@ -40,7 +40,7 @@
 <body></body>
 <script>
 
-  var maxElements = Number(location.href.split('?')[1]) || 1000;
+  var maxElements = Number(location.href.split('?')[1]) || 500;
   var duration = 2000;
   var toAnimate = [];
   var radius = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight;
@@ -68,7 +68,7 @@
     var angle = i * 4;
     // var delay = ((duration * 2) / maxElements) * i;
     // var angle = i * 1000;
-    var delay = (duration / maxElements) * i * 1;
+    var delay = (duration / maxElements) * i * 10;
     var a = anime({
       targets: el,
       translateX: [0, Math.sin(angle) * distance],

diff --git a/documentation/examples/anime-tests.html b/documentation/examples/anime-tests.html
@@ -38,20 +38,22 @@
 <body>
   <div class="el color-01"></div>
   <div class="el color-04"></div>
+  <div class="el color-08"></div>
+  <div class="el color-12"></div>
   <script>
     var seek0 = anime({
       targets: '.color-01',
       translateY: [200, 100],
       // loop: true,
-      // autoplay: false,
+      autoplay: false,
       update: function(anim) { console.log('update', anim.currentTime);},
       begin: function(anim) { console.log('begin', anim.currentTime);},
       run: function(anim) { console.log('run', anim.currentTime);},
       complete: function(anim) { console.log('complete', anim.currentTime);}
     });
     var duration0 = anime({
       targets: '.color-04',
-      translateY: [200, 500],
+      translateY: [200, 100],
       loop: true,
       autoplay: false,
       duration: 0,
@@ -63,6 +65,26 @@
     console.log(duration0.currentTime);
     // animation.seek(0);
     // console.log(animation.currentTime);
+    var tl = anime.timeline({
+      targets: '.color-08',
+      easing: 'easeOutExpo',
+      loop: true
+    });
+
+    tl.add({
+      translateY: -100
+    }).add({
+      translateY: 0,
+      easing: 'easeOutElastic'
+    }).add({
+      targets: '.color-12',
+      translateY: [0, 100],
+      easing: 'easeInElastic'
+    }).add({
+      translateY: 100
+    }).add({
+      translateY: 0
+    })
 
   </script>
   <!-- <script src="../assets/js/stats.js"></script> -->

diff --git a/documentation/index.html b/documentation/index.html
@@ -877,7 +877,7 @@ <h3 class="demo-title">Absolute offset</h3>
 </div>
 
 <div id="timelineParameters" class="demo">
-  <h3 class="demo-title">Timeline parameters</h3>
+  <h3 class="demo-title">Basic Timeline parameters</h3>
   <div class="demo-content">
     <div class="line">
       <div class="square shadow"></div>
@@ -922,6 +922,48 @@ <h3 class="demo-title">Timeline parameters</h3>
 </script>
 </div>
 
+<div id="TLParamsInheritance" class="demo">
+  <h3 class="demo-title">Parameters inheritance</h3>
+  <div class="demo-content">
+    <div class="line">
+      <div class="square shadow"></div>
+      <div class="square el"></div>
+    </div>
+    <div class="line">
+      <div class="circle shadow"></div>
+      <div class="circle el"></div>
+    </div>
+    <div class="line">
+      <div class="triangle shadow"></div>
+      <div class="triangle el"></div>
+    </div>
+  </div>
+<script>var TLParamsInheritance = anime.timeline({
+  targets: '#TLParamsInheritance .el',
+  delay: function(el, i) { return i * 200 },
+  duration: 500,
+  easing: 'easeOutExpo',
+  direction: 'alternate',
+  loop: true
+});
+
+TLParamsInheritance
+  .add({
+    translateX: 250,
+  })
+  .add({
+    opacity: .5,
+    translateX: 250,
+    scale: 2,
+  })
+  .add({
+    translateX: 0,
+    scale: 1
+  });
+
+</script>
+</div>
+
 </article>
 <!-- -->