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