How to add animation to a slider scroll before and after scroll?

[learn_gsap]

Hello everyone, I hope you're doing great!
 

I've just started using GSAP and have encountered a question that I'd appreciate your help with. I have a scroll slider and I want it to have an animation before it reaches a point where it moves right and up. Then, as I scroll, I want the slider to start functioning. After the slides finish, I want the slider to move upwards and left.

I've tried a few things but couldn't achieve this, and the animations conflicted with each other.

I'd be grateful if you could provide a solution or any guidance.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Rodrigo]

Hi,

 

Besides echoing the need for a minimal demo, the only advice I can give you is, for the animation before the slider, use another ScrollTrigger instance that takes care of that. For the animation after, just use the onLeave callback every ScrollTrigger instance has:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#onLeave

 

Happy Tweening!