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!

Thank you for your patience and kind welcome Carl! Apologies for missing the Codepen demo. Please see this demo: http://codepen.io/anon/pen/reVGYV So two things are vexing me: The last (green) square blinks by pretty quickly. I'd like it to stay for two seconds like the others 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!

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!