[endtime always return differently on page refresh]

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!

[endtime always return differently on page refresh]

I noticed that you have some random durations for each of the leaf that you create using generateParticles. And since it all of those inner timelines get added inside the main leafEmitterTl, the onComplete of leafEmitterTl will fire once every animation inside is completed.

 

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

[endtime always return differently on page refresh]

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

See the Pen dYKWEa#0 by ayakashi (@ayakashi) on CodePen