saia

Ok, Codepen added. (Sorry it was so late.) I've tested it with absolute number and it returned ok. I noticed (while testing in the codepen) that the dur1 is the one causing the fluctuating endTime. It's my fault, since I divide the number by 0, which is impossible... And also.., it turned out that I put the wrong variables in the wrong spot, that just makes matter worse.... Once I fixed those, the endtime returns right! Thanks for the help! GSAP is great and so is the forum!

At first I used random duration (between 2-4s), but after getting the 'random' end time, i set the base duration (dur) to 2s. and I set all the tween to start at position 0 (so they run simultaneously) except for the alpha and scale tween (to give the effect of fading in and out and also getting smaller/ big towards the end). And even when I set the position to start not at 0, I calculate the insertion position and duration so it'll always sum up to 'dur' (so if 'dur' is 4, and tween insert position is 2, then its duration should be 2, so at most, the total duration for the timeline 2s, or at most 3 if there's some rounding somewhere). I've tried removing the "delay: insertionTime" (thought this caused the problem, although numberOfLeaf*0.015 wouldn't amount to even 2s), and it the endTime still giving me the same fluctuating result. Because I'm curious, I tried to see each leafTL endTime, and it gives me fluctuating result so I think leafTL is the problem. This is the console log of the leafTL and also the masterTL and emitterTL: leafTL0 leaf0 3.873370440647392 insertionTime leaf0 0 leafTl1 leaf1 5.912223292124084 insertionTime leaf1 0.15 leaftTl2 leaf2 7.950909852935254 insertionTime leaf2 0.3 leafTl3 leaf3 4.504147286144127 insertionTime leaf3 0.44999999999999996 leafTl4 leaf4 83.06930318132946 insertionTime leaf4 0.6 masterTL timeEnd 83.06930318132945 emitterTL timeEnd2 83.06930318132945

Ok, so I'm making an animation of blown leaves with gsap. This animation is triggered by a link click, and after the animation finished, should redirect user to the link in the clicked link. Animations works fine, no error in console, and no unexpected behavior happening. but the redirection (happens on onComplete) happens in random time. I'm using endTime() to get the total time needed for the animation, but the time returned ranged from 4s to 20s to 30s, and this causes the redirection happens in random time (sometimes quick, sometimes super long time has passed). Since I set the leaf animation timeline (leafTL) duration to 2s, I expect the endTime() to return 2s or maybe 3s (with the start delay), not 4s~30s. Can someone explain to me why this is happening? I'm new to gsap, so maybe I misunderstand or miss something... CODEPEN Sample My Code // ================================================= // LEAF PARTICLES // ================================================= // Global variable related to leaf particle var $leafEmitter = $('#emitter'), isRepeat = 0; // Variables holding bezier paths for animation var leafPaths = []; leafPaths.push( [{x:0.396,y:116.115},{x:37.471000000000004,y:68.14599999999999},{x:67.613,y:121.484},{x:108.874,y:68.14599999999999},{x:148.695,y:16.667999999999985},{x:185.84699999999998,y:68.58699999999999},{x:234.515,y:0.28999999999999204}] ); leafPaths.push( [{x:0.396,y:116.115},{x:18.934,y:92.131},{x:56.778,y:99.253},{x:88.653,y:88.261},{x:111.48700000000001,y:80.387},{x:124.873,y:55.977999999999994},{x:108.732,y:45.742},{x:75.61099999999999,y:24.738999999999997},{x:60.229,y:61.852},{x:79.598,y:71.332},{x:96.195,y:79.455},{x:126.293,y:76.33699999999999},{x:141.219,y:65.42999999999999},{x:157.659,y:53.416},{x:148.864,y:41.95199999999999},{x:170.149,y:28.41899999999999},{x:187.238,y:17.553999999999988},{x:220.392,y:13.20999999999999},{x:229.597,y:0.2909999999999897}] ); leafPaths.push( [{x:0.396,y:116.115},{x:23.165,y:88.873},{x:37.164,y:97.1},{x:68.165,y:88.873},{x:101.58200000000001,y:80.00500000000001},{x:100.202,y:60.97200000000001},{x:122.11800000000001,y:59.915000000000006},{x:157.49900000000002,y:58.21000000000001},{x:165.517,y:37.206},{x:179.16500000000002,y:30.873000000000005},{x:201.39200000000002,y:20.560000000000002},{x:206.49800000000002,y:22.206000000000003},{x:234.51500000000001,y:0.29000000000000625}] ); // Extend Math function to enable random from given range Math.randMinMax = function(min, max, round) { var val = min + (Math.random() * (max - min)); if( round ) val = Math.round( val ); return val; }; // Function to create a leaf particle function leaf(id){ var idx = id || 0, pathsTotal = leafPaths.length, $leaf; // create new DOM element - the leaf $leaf = $('<div id="particle'+ idx +'" class="leaf leaf'+ Math.randMinMax(0,4, true) +'" />'); // append new leaf to its emitter $leafEmitter.append( $leaf ); // create its animation var degree = Math.randMinMax(50, 360), insertionTime = idx * 0.015, dur = 2, sc = Math.random()*1.3 + 0.4, rd = Math.randMinMax(0,1.5), dur1 = dur/Math.randMinMax(0,2.5), resDur1 = dur-dur1, path = leafPaths[ Math.randMinMax(0,3, true) ]; var leafTL = new TimelineMax({ delay: insertionTime, ease: Ease.easeOut }); leafTL.to($leaf, dur, {bezier:{type:"cubic", values:path}, force3D:true, ease:Power0.easeNone}, 0); leafTL.to($leaf, dur, {rotation: degree}, 0); leafTL.to($leaf, resDur1, {scale: sc}, 0); leafTL.to($leaf, dur1, {scale: 1}, (0+dur1)); leafTL.to($leaf, dur/2, {alpha: 1}, 0); leafTL.to($leaf, dur/2, {alpha: 0}, (0+(dur/2))); leafTL.add('end'); return leafTL; } // Function to generate the particles function generateParticles(num){ var masterTL = new TimelineMax(); for(i = 0; i < num; i++){ var particle = leaf(i); masterTL.add(particle, 0); } return masterTL; } // NOTE: End of leaf particle function // ================================================= //Create the leaf here var leafParticles = [], leafEmitterTl = new TimelineMax({ onComplete: leafAnimDone }).pause(); function leafAnimDone(){ /*Redirect User here*/ } leafParticles = generateParticles(5); //generate the particles leafEmitterTl.add(leafParticles); //add particles timeline