Nested timelines not running sequentially

[Candice]

Hi!

 

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) 

 

$(document).ready(function(){

    mainTimeline

        .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

[Carl]

When you use

tl.add(someFunctionThatReturnsATimeline());

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. 

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/call/

 

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. 

[Candice]

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

return;

 

 

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?  

[Candice]

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.