Jump to content
Search Community

TimelineMax: Duration settings

vsiege test
Moderator Tag

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

I'm having an issue with sequencing some animations. I would ultimately like the duration of the timeline to be equal to 2 seconds but only have the following objects animate at specific points in the first second.

 

Goals:

1. Duration of TimelineMax = 2 seconds

2. Specifically time the elements to start and finish there animations within the first second.

3. Loop timeline

 

 

So far I have the loop working and all animation running. the problem is that the duration is not 2 seconds long. I could really use some help straightening this out. Thank you in advance.

 

	    tl1.insertMultiple(
			    [
				    TweenLite.fromTo(  byId("bac0"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:0,rotation:-360, top:159, left:649}}  ),
				    TweenLite.fromTo(  byId("pill0"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:1,rotation:-360, top:159, left:649}}  ),
				    TweenLite.fromTo(  byId("bac2"),.2, {css:{autoAlpha:1,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:0,rotation:360, top:410, left:500}}  ),
				    TweenLite.fromTo(  byId("pill2"),.2, {css:{autoAlpha:0,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:1,rotation:360, top:410, left:500}}  ),
				    TweenLite.fromTo(  byId("bac4"),.2, {css:{autoAlpha:1,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:0,rotation:-720, top:600, left:300}}  ),
				    TweenLite.fromTo(  byId("pill4"),.2, {css:{autoAlpha:0,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:1,rotation:-720, top:600, left:300}}  ),
				    TweenLite.fromTo(  byId("bac6"),.2, {css:{autoAlpha:1,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:0,rotation:330, top:222, left:100}}  ),
				    TweenLite.fromTo(  byId("pill6"),.2, {css:{autoAlpha:0,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:1,rotation:330, top:222, left:100}}  ),
				    TweenLite.fromTo(  byId("bac8"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:0,rotation:360, top:90, left:240}}  ),
				    TweenLite.fromTo(  byId("pill8"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:1,rotation:360, top:90, left:240}}  ),
				    TweenLite.fromTo(  byId("bac10"),.2, {css:{autoAlpha:1,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:0,rotation:-225, top:270, left:440}}  ),
				    TweenLite.fromTo(  byId("pill10"),.2, {css:{autoAlpha:0,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:1,rotation:-225, top:270, left:440}}  )
					 ],0, "normal",.1
	    );

Link to comment
Share on other sites

I'll offer a few things:

  • You put your "delay" in the wrong place. It belongs in the "to" vars object, and NOT inside the css object. For example:

//BAD:
TweenLite.fromTo(element, 0.2, {css:{scale:0.5, delay:0.2}}, {css:{scale:1}});
//GOOD:
TweenLite.fromTo(element, 0.2, {css:{scale:0.5}}, {css:{scale:1}, delay:0.2});

  • It looks like alll your tweens are 0.2 seconds long, and you have a stagger of 0.1. Since there are 12 tweens, that means the last one will get inserted at 1.1 seconds. Therefore, your timeline will be 1.3 seconds long (if we assume no delays). If we include the delay, it'd be 1.5 seconds. So you can simply adjust your timing accordingly or you can even set the duration on the timeline and it will automatically adjust the timeScale to match that duration. So, if you do tl1.duration(2) after you inserted all your tweens, and the duration is normally 1.5 but you're setting it to 2, that means timeScale will get adjusted on that timeline to be 0.75.

Does that help?

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.
×
×
  • Create New...