Jump to content
GreenSock

kreativzirkel

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

Recommended Posts

.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– )

Link to comment
Share on other sites

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

 

try:

.add(vorhang(), "-=.5");
  • Like 3
Link to comment
Share on other sites

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

 

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

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!

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×