Gsap Timeline Issue

[Dharmendra Deval]

I have try to create a timeline for the on scroll left content and right image change but it is way more fast, I want it to be slower as possiblle.

See the Pen jOJMPav.%C2%A0 by Dharmendra-Deval (@Dharmendra-Deval) on CodePen

[mvaneijgen]

You can increase your ScrollTrigger by increasing the end trigger. Right now you've set it to end: "=+100%", but if you set it to end "+=6000px" it will span you're animation over 6000px or what ever value you pick. 

 

As for your animation I would advise you to remove ScrollTrigger for now and just watch your animation, just really look and pay attention what it is doing. This will get played on scroll. Right now it is 32 seconds long (Side note: these 32 seconds will get stretched over 6000px) I would figure that the images would change when the text changes "Find shifts", but that is not what it is doing at the moment. 

 

See the Pen jOJyoBB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Dharmendra Deval]

So is there any timeline sequence issue?
If you have a demo please share it will be helpful.

[mvaneijgen]

I would go the route of something like this. I never work with changing classes, I rather just animate properties directly with GSAP, so I can't fix that for you.

 

But here I've used named position parameters to have certain tweens play at the same time. ScrollTrigger is disabled, but if you were to enable it it would play this timeline on scroll. Hope it helps and happy tweening! 

 

See the Pen jOJyoBB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

[Dharmendra Deval]

ok, thank you for this It really help me to find the final solution.