Jump to content


Trouble with certain combination Timeline + Stagger with reverse

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

var line1 = new TimelineMax({paused:true});

line1.to('.menu-button', 4,  {left:'0%', top:'0%', rotation: 360, ease:Bounce.easeOut})
  .to('.menu-button', 1, {top:'25%', repeat:1, yoyo:true}, 0.5)
  .to('.menu-button', 1, {width:'100%', background:'#fff', opacity:'0.9'}, 4)
  .to('.fa-bars', 1, {color:'#000'}, 4)
  .to('.fa-bars', 1, { rotation: 360, ease:Linear.easeOut}, 0)
  .to('.background', 1, { scale: 2.2}, 2)    
 .staggerTo($('nav ul li'), 0.3, {css:{width:'10%'}}, 6);

$('.menu-button').click(function() {;
    line1.reversed() ? line1.play() : line1.reverse();


As you can see this is the code that you are familiar with that im testing out. Now where im simply having trouble are combinations. I added a .staggerto for my list items. I expected that each list work fades in at a time interval of 0.3 seconds after a delay of 6 seconds.


Removing staggerTo makes everything work but I would like to test out a stagger within a timeline animation like the above. Am I missing something? I did exactly what the docs were saying

Link to comment
Share on other sites

Fixed by doing the following:


line1.staggerTo(".box", 1, {width:'10%}, 0.5);

Link to comment
Share on other sites

Hi, in this code here


 .staggerTo($('nav ul li'), 0.3, {css:{width:'10%'}}, 6);


you are saying that there should be 6 seconds between each animation of each element in your selector.


I'm guessing the code was working, you just weren't waiting 6 seconds. 


If you want to use the position parameter with a TimelineLIte.staggerTo, you would add an additional parameter after the 6 like


 .staggerTo($('nav ul li'), 0.3, {css:{width:'10%'}}, 6, "+=2");

Link to comment
Share on other sites

Thanks alot for the infos! This clears up some things. I still need to get used to the way GSAP works. Sometimes even when reading the docs I get stuck at things and really dont know any further. Its mostly always the small things that block me.


I thought it could not select list items so I made  box divs and changed the code abit to target them.

Link to comment
Share on other sites

No worries, you're doing this the best way possible. Try it for yourself and when it doesn't work ask questions.

Hang in there, I think you are very close to hitting that point where it all clicks. From there your comfort level and ability will sky-rocket.

  • 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.