Slideshow cycle with TimelineMax

[alexpi]

Hello,

 

I need to make a slideshow that is part of a larger animation. The images need to fade in-out, move and scale in parallel. I achieved that effect, but my problem is that I can't repeat the cycle using the same motions, the transition from the last image to the first is abrupt. Any suggestions?

 

EDIT: I searched the forum, and found some solutions with TweenMax, (http://greensock.com/forums/topic/8174-how-do-i-make-a-seamlessly-cycling-slideshow/?hl=timelinemax+slideshow) but I don't know if the moving and scaling effects are possible using those.

 

Thanks

See the Pen grNrdz by alexpi (@alexpi) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Since timelines are linear, you can't play the beginning while the end is still playing.

1 solution is to have a tween at the end that fades from last to first and then you jump back to the beginning where the first slide is already present.

This is a little tricky as you also have to change the stacking order (z-index) as the first slide is below the last slide.

 

tl.to(slides[0], duration, {x: "+=" + left, scale: scale, ease: Power0.easeNone})
  .add("repeat")
  .to(slides[1], overlap, {autoAlpha: 1})
  .to(slides[1], duration, {x: "+=" + left, scale: scale, ease: Power0.easeNone}, "-=" + overlap)
  .to(slides[2], overlap, {autoAlpha: 1})
  .to(slides[2], duration, {x: "+=" + left, scale: scale, ease: Power0.easeNone}, "-=" + overlap)
  .to(slides[3], overlap, {autoAlpha: 1})
  .to(slides[3], duration, {x: "+=" + left, scale: scale, ease: Power0.easeNone}, "-=" + overlap)


  //new


  .set(slides[0], {zIndex:8, scale:1, x:0, autoAlpha:0})
  .to(slides[0], overlap, {autoAlpha: 1})
  .to(slides[0], duration, {x: "+=" + left, scale: scale, ease: Power0.easeNone}, "-=" + overlap

 

http://codepen.io/GreenSock/pen/grNgWq?editors=0010

 

I changed to solid colored divs as it was a little weird seeing the images change every time i changed the code

[alexpi]

Very clever solution! Thank you very much!