Pin Section with tabs

[Danny21]

Hi,

 

I have some experience with GSAP - StrollTrigger in general, but not so much with the .pin property.

Im having quite some trouble achieving a section with tabs and would like to ask for some help.

 

Layout :

On the left, I have a simple Tabs menu with a progress bar.

On scroll I want the progress bar fill up. That's working so far.

I also want to highlight the "active" tab, it's not working properly.

 

On the right, I have the main content of the tab with some title, text and image.

Ideally, on scroll I would like to fade in/out the content.

 

I found this demo, which I tried making it work for my needs, but having some troubles.

See the Pen YzZLVyY by akapowl (@akapowl) on CodePen

 

Regards, 

Danny

See the Pen eYowpjp by jokerdanny21 (@jokerdanny21) on CodePen

[Rodrigo]

Hi @Danny21 and welcome to the GSAP Forums!

 

In this cases is better to create just a single timeline to control everything. It's always a good idea to start without ScrollTrigger and focus on the animation first and then plug ScrollTrigger back into the mix.

 

Maybe something like this:

See the Pen rNbELKO by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!