Jump to content
GreenSock

alexpi

Slideshow cycle with TimelineMax

Go to solution Solved by Carl,

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

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

Link to comment
Share on other sites

  • Solution

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 :)

  • Like 3
Link to comment
Share on other sites

Very clever solution! Thank you very much!

  • 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.
×