loop slides smoothly to beginning

[mainderay]

I've got a very simple rotating banner working using this code:

function init(){
    var tl = new TimelineMax({repeat:2, repeatDelay:0});
    var slides = [].slice.call(document.querySelectorAll(".slide"));
		 
   tl.staggerFrom(slides, 1, {y: '-=0', autoAlpha: 0, ease:Power4.easeInOut}, 2.0);
}

init();

I'm trying to eliminate the delay and "whiteout" effect between the last and first slide respectively. I'd like to have a uniform transitions between all the slides including from the last to the first. I did try to simply repeat the slides in the array (e.g.: [ 1, 2, 3, 1, 2, 3, 1, 2, 3 ], but the timeline doesn't seem to like that and stops after the first set of 3.

 

I also searched the forums far and wide and could not find an example or solution. Thank you!

[Carl]

hi and welcome to the forums.

 

It really helps if you can supply a demo so we can actually see all the code.

 

I assume though that you are trying to do something like this:

 

var tl = new TimelineLite({onComplete:replay});


tl.staggerFrom(".box", 1, {yPercent:-100}, 1);


function replay() {
  tl.play(1);
}

 

http://codepen.io/GreenSock/pen/yONoep

 

note there are two green divs with the #1. When the last one comes in we jump to the end of the first one and bring in #2.

[mainderay]

Thank you for your patience and kind welcome Carl! Apologies for missing the Codepen demo. Please see this demo:

 

See the Pen reVGYV by anon (@anon) on CodePen

 

So two things are vexing me:

1. The last (green) square blinks by pretty quickly. I'd like it to stay for two seconds like the others
2. I'd like to see it transition from the green square (#3) straight back to the red square (#1) without the blank (no square) in between.

Thank you again for your patience!

[Carl]

Thanks for the demo and clarification. 

I still think it would be easier to have 2 red boxes (one at the beginning and one at the end) but you could do something like this:

 

http://codepen.io/GreenSock/pen/XdbGXp

 

Note, using this approach if you had blue, yellow, and orange divs in the middle you would have to set all of their autoAlpha's to 0.

[mainderay]

Thank you Carl! I'm using photos in the actual piece and wanted to keep the banner as light as possible. Your example helps a lot. I didn't expect something that feels pretty basic to be so complex. I think I'm realizing that most banners aren't designed to loop like that and I'm even rethinking the overall design. Nevertheless, your example has taught me a lot. Thank you!

[Carl]

No problem. And I agree that on the surface it doesn't seem like it should be that complex. Just keep in mind that timelines are linear and the virtual playhead can only be in one place at a time so you can't be animating something in the beginning of the timeline while something at the end of the timeline is animating. The easy way out of this is to duplicate the thing at the beginning of the timeline and move it to the end so you can do nice crossfades and such. 

[Dipscom]

There is a simple way to achieve what you are after, you just need to be a little bit more granular on what you tell the timeline to do.

 

The reason it flashes at the end is because you had a single .staggerFrom() call. So, whenever the timeline repeats, it jumps all the way back to the very start, meaning, every element has its opacity set to 0.

 

To solve your issue, all you have to do is to create an "end animation" at the tail of your animation that matches the start of your animation.

 

If you want to be super dorky and not have that flash at the beginning, you have to be even more granular and take that into consideration. See the attached fork of your pen with a couple of examples:

 

See the Pen jqWwNd by dipscom (@dipscom) on CodePen