GSAP Slider - reversing the animation after last slide

[Krishnakant]

Hi,

 

I have a overlay slider animated to reveal next slides. Its bit experimental for now to create something like this - https://in.pinterest.com/pin/422564377554733199/

 

What I am not able to figure out is - how do I reverse the animations after the last slide. I am not able to think of possible ways after trying almost all possible options. Could you guide me on this? 

See the Pen NWJPrrX by designjuice (@designjuice) on CodePen

[GreenSock]

You could easily do that by putting both timelines into a master timeline that you repeat/yoyo:

let masterTL = gsap.timeline({repeat: 1, yoyo: true})
masterTL.add(theBGColorTL, 0);
masterTL.add(theSlideTL, 0);

But a problem I saw is that you're creating the background color tweens in such a way that they're all overlapping in a conflicting way. So multiple tweens are trying to control the same property of the same element at the same time. That's definitely not a good idea, and it'll look a little odd when running backwards because those animations will render in the opposite order (as they should) and you could see what appears to be jumps due to the overlaps/conflicts. 

 

I think this setup would be cleaner, although I'm not sure exactly what timing you want so you're welcome to play with the number: 

See the Pen LYaEpXR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Good luck!

[Krishnakant]

Hi,

 

Thank you so much - in fact I realized it later to have a master timeline just as you suggested. And yes, the issue of overlapping background color tweens was something which I could not figure out - this indeed is a cleaner solution to both the issues I had with it. Marked it as a solution.

 

Thank you again! This left me feeling like - there's lot to learn about GSAP.

 

Could you suggest any course on GSAP - from the beginner level to Pro? I am very much interested to learn.

[mvaneijgen]

I've started with @Carl's course and couldn't be happier with it! Still revisited some courses from time to time. https://www.creativecodingclub.com/bundles/creative-coding-club if you want some samples check out their YouTube channel https://www.youtube.com/user/snorklTV/videos

 

And also of course the GSAP channel https://www.youtube.com/c/GreenSockLearning/videos

[GreenSock]

Yep, I'd agree - @Carl's courses are top-notch. Creative Coding Club is a wonderful resource because Carl takes you through concepts in a way that's very easy to understand and fun. Good luck!