Tabbing+OnScroll Content Change Issue

[Dharmendra Deval]

The issue is like when I scroll and reach to the second item and after that click the first item and after that scroll down than the active_tab class and the corsponding image is not showing.

See the Pen jOJMPav by Dharmendra-Deval (@Dharmendra-Deval) on CodePen

[mvaneijgen]

Hi @Dharmendra Deval welcome to the forum!

 

I would start by removing ScrollTrigger and first focus on the animation. I would start by creating a timeline and then in sequence put everything that you want to happen one by one on the timeline and when that is working and only then add ScrollTrigger to the mix. I would then add labels to specific points of the timeline and then use the ScrollTo plugin to jump to specific points of the timeline

 

I don't have a fancy demo, but this demonstrates the gist of what I mean. There is one timeline with one ScrollTrigger and all the animations are on that timeline, if you normally scroll the animation gets played in sequence and with the button on top you can directly jump to a point in the animation. Hope it helps and happy tweening! 

 

 https://gsap.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()/

 

See the Pen zYLyqMX?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen