onComplete and .totalDuration() ignore an added timeline via .add()

[katerlouis]

.totalDuration() on `tl` gives me 2.04, but should give me 4.24.

Also `onComplete` is fired after 2.04 (I assume, since it is way too early).

 

The timing calculation seems to ignore the added timeline at the end `vorhang`; 

but the animation `vorhang` executes.

All I see though is the part of the animation that plays in half second negative offset.

 

I definitely need this timeline to take `vorhang` into account. 

 

Code:

var tl = new TimelineMax({ onComplete: function() { animationOverlay(false); }  });
	tl
		.set($layers, { opacity: 1, smoothOrigin: false, transformOrigin: blaseOrigin() })
		.staggerFromTo($layers, 2, 
			{ scale: 0 },
			{ scale: function(i) { return 2 + 0.2*i }, ease: easing }
		, 0.01)
		.to($layers, tl.totalDuration(), { rotation: function() { return rand(7, 14, true); }, ease: easing }, 0)
		.add(vorhang, "-=.5")
	;
return tl;



function vorhang() {
	var tl = new TimelineMax();
		tl.fromTo(".vorhang-blau", 2, { scale: 0 }, { scale: .7, ease: Power2.easeOut, clearProps: "all" }, 0)
		  .fromTo(".vorhang-weiss", 2, { scale: 0 }, { scale: 1, ease: Power2.easeOut, clearProps: "all" }, 0.2);
		return tl;
}

(sorry, no time for a codepen– )

[Carl]

You are adding the vorhang function to your timeline not the timeline that vorhang() creates and returns. 

 

try:

.add(vorhang(), "-=.5");

[katerlouis]

Thank you very, very much for this quick reply. You rescued the deadline :D

 

such a subtle visual difference– easy to overlook for not-so-experienced GSAPpers (from grashopper, u know!? )

confusing that the function itself without the brackets also triggers the animation.

 

It's also confusing that there are cases in JS where you can actually pass named functions with brackets as parameters (like in this case) and cases where you need to pass on parameters as another parameter in form of an array.

 

Never the less, back to work. 

 

Thanks again!

[katerlouis]

Carl has answered the question;

But for better understanding for others that came here searching.

-

// wrong...
.add(vorhang, "-=.5"); // only triggers the animation

// right!
.add(vorhang(), "-=.5"); // returns the tl object so GSAP can calculate timings correctly

You are adding the vorhang function to your timeline not the timeline that vorhang() creates and returns.