GSAP slider with animation in between slides

[aerra]

Hi,

 

I know sliders have been heavily talked about on this forum but I couldn't find a thread which helped me enough.

 

I want to achieve an autoplaying infinite slider with a certain animation in between each slide. Exemplification of said animation can be found here: https://imgur.com/6hjmzsU . Essentially, I want an image to replace the one that is currently active by sliding diagonally over it into view.

 

Here's what I have so far:

https://codesandbox.io/s/hardcore-bartik-sn3unj?file=/src/index.js

 

I've created the codesandbox by referencing this thread, but I'm struggling with adding the in/out animation for each slide - right now I'm stuck on the first slide.

 

[OSUblake]

Hi Aerra,

 

You're welcome to ask any GSAP-specific questions in these forums, but unfortunately we don't have the resources to offer free general consulting services. Please read the forum guidelines. If you still need some help, you can definitely post in the "Jobs & Freelance" forum and see if you can hire someone. Or contact us directly if you'd like to explore paid GreenSock consulting services. 

 

[aerra]

Haha, hiring someone for a personal project would be a first. I'm just trying to learn, I'm sorry I didn't follow the guidelines, I didn't mean to waste anyone's time! I would delete the post but I'm not sure if I can. Have a nice day.

[OSUblake]

You're more than welcome to ask any GSAP questions you want, and that's great that you're trying to learn, but I was just making sure to manage your expectations because a question like this might not get any responses due the amount work that might be involved with answering it as sliders can become rather involved. 

 

[akapowl]

 

If you need any sort of inspiration for how to possibly get the effect you're after in the first place, @aerra, codepen.io is always a good place to search for something like that.

 

Just search for 'skewed slider' there and you should instantly find this one (with close to 60k views it should be the original).

 

Now it doesn't use GSAP but it definitely shows, just how much work goes into something like that. Maybe that pen can at least serve as some sort of starting point though. Converting things to GSAP, you could e.g. try and make use of the new Observer Plugin. Happy tinkering!

 

See the Pen EyLWKg by WispProxy (@WispProxy) on CodePen