Jump to content
GreenSock

cmaxster

TimeLineLite Overlap Question

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

tl.to(photography, 3, {width:photoWidthTo, height:photoHeightTo})
.to(lightGreenBox, 0.5, {width:lightGreenBoxWidth}, "-=1.5")
.to(copy1, 0.5, {opacity:1})
.to(darkGreenBox, 0.5, {width:darkGreenBoxWidth})
.to(copy2, 0.5, {opacity:1})
.to(cta, 1, {opacity:1});

hello, I'm new to JavaScript TimelineLite and I can't seem to figure out how to do this simple thing..

 

I want to have photography animate, and then have lightGreenBox overlap it's animation by -1.5 seconds, but then I want all of the animations after it to sequence one after another after lightGreenBox finishes.

 

Right now lightGreenBox is being offset, but none of the other animations are offsetting themselves accordingly..

 

It's kind of hard to explain.. I basically just want the rest of the sequence to continue after lightGreenBox is finished. I want the whole sequence to overlap photography's tween.. not just lightGreenBox.

 

Like this:

tl.to(photography, 3, {width:photoWidthTo, height:photoHeightTo})
	.to(lightGreenBox, 0.5, {width:lightGreenBoxWidth}, "-=1.5")
	.to(copy1, 0.5, {opacity:1}, "-=1.0")
	.to(darkGreenBox, 0.5, {width:darkGreenBoxWidth}, "-=0.5")
	.to(copy2, 0.5, {opacity:1})
	.to(cta, 1, {opacity:1});

Does that make sense? can anyone offer the solution?

Link to comment
Share on other sites

Thanks for the question. It makes sense;)

 

The reason it wasn't working as you would like is due to a very particular behavior in timelines.

New tweens are added relative to the end of the timeline not directly after the previously added tween.

 

So in your case you added the lightGreenBox tween which is 0.5 seconds long at a time of 1.5 seconds, but your first tween (photography) is 3 seconds long. The end of the photography tween is where the end of the timeline is, which means that is where the tween on copy will be placed. 

 

There are a few ways to get around this. I prefer the first which is to create a separate timeline for all the tweens that come after photography and nest it in tl at a time of 1.5 seconds. This way the length of the photography tween will have no impact on anything in that child timeline like

 

tl.to(photography, 3, {width:photoWidthTo, height:photoHeightTo})

var nested = new TimelineLite();

nested.to(lightGreenBox, 0.5, {width:lightGreenBoxWidth})
.to(copy1, 0.5, {opacity:1})
.to(darkGreenBox, 0.5, {width:darkGreenBoxWidth})
.to(copy2, 0.5, {opacity:1})
.to(cta, 1, {opacity:1});
tl.add(nested, "-=1.5");

 

option2 is to use the .recent() method to help get the endTime() of the most RECENTLY added tween, and then use that value in a position parameter of each subsequent tween.

 

tl.to(photography, 3, {width:photoWidthTo, height:photoHeightTo})
.to(lightGreenBox, 0.5, {width:lightGreenBoxWidth}, "-=1.5")
.to(copy1, 0.5, {opacity:1}, tl.recent().endTime())
.to(darkGreenBox, 0.5, {width:darkGreenBoxWidth}, tl.recent().endTime())
.to(copy2, 0.5, {opacity:1}, tl.recent().endTime())
.to(cta, 1, {opacity:1}, tl.recent().endTime());

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/recent/TimelineMax/recent/

 

if you need more help, please provide a reduced CodePen demo, as its a little tough to code this stuff blind.

  • Like 2
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.
×