Jump to content
Search Community

Nested timelines not running sequentially

Candice 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



So what I'm trying to do is get these to run sequentially, and for some reason, slide1 runs...then slide 2 starts followed shortly by slide 3 (2 and 3 are overlapping) 


        .from($outerContainer, 0.5, {autoAlpha:0}) //hides the white flash hopefully
       .add(slideOne()) //run first
        .add("panel2", "-=0.5") 
       .add(slideTwo(), "panel2")  //runs second
       .add("panel3", "-=0.5") 
       .add(Bspromo(), "panel3"); //runs third



This is my first attempt at nesting timelines and everything was working fine until adding the BSpromo function. There's something weird happening about the way it loops through the images. I need to be able to have a loop there though, in case I need to add more images into it. (The slideshow also has 6 other slides...this is the simplified version.)







See the Pen adLBmL by doubletake (@doubletake) on CodePen

Link to comment
Share on other sites

When you use


I would strongly recommend that someFunctionThatReturnsATimeline() has the sole responsibility for creating and returning a timeline.


I'm very suspicious of this delayedCall() and the set() in the middle of the timeline-creating code:


TweenLite.set($slides.filter(":gt(0)"), {autoAlpha:0}); //we hide all images after the first one, gt(0) grabs all the elements > 0 (first one)
TweenLite.delayedCall((stayTime*2), nextSlideStop);
All that code gets executed as soon as your main timeline is built via:
.add(Bspromo(), "panel3")
not when the timeline that is created by Bspromo() is run.
If you want to schedule when a function is run, you can place an onComplete callback on any tween in a timeline, or directly on a timeline. Also you can use the call() method to call a function at any time inside a timeline. 
Again, the trick is to make sure Bspromo() only returns a timeline. Put the other logic in another function and then decide on the best time and way to call that function. 
  • Like 3
Link to comment
Share on other sites

Thanks for your response! It helps to know that the set and delayed call happen at the start of the maintimeline, I wasn't sure when they were firing. 


I'm not really sure how to make bspromo() only return a timeline. The counter info is needed in order for the animation to progress to the next LI/image, right? (I didn't write all of the code btw, so I'm just trying to hack together something that'll work)


I'm not even sure what value this is returning:


TweenLite.to( $slides.eq(currentSlide), slideTime, {autoAlpha:0} );  //fade the current slide out over the same fadein/fadeout time as the other times




All I want to do is fade in the first image, and animate through the images one by one without having to do them individually...any ideas?  

Link to comment
Share on other sites

So um, replying to myself...but I just ended up doing it the non-looping way for now. Kind of on a time-crunch... 


See the Pen xZXqmq by doubletake (@doubletake) on CodePen


Now I just have to figure out how to get it to loop correctly. (the {repeat:-1 isn't working for some reason}


Figured out I needed to use timelinemax and repeatdelay. I think I'm good to go. I'll leave learning loops for another day.

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