Pin section and change tabs on vertical scroll

[cgeorgiev]

Hello everyone,

Can you help me with this - when I reach What We Do section I need to pin it and scroll through the four tabs on left and then unpin and go to Latest Insights section.

Thanks a lot!

 

[GSAP Helper]

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you understand the tools! If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/. For your effect just focus on the animation and remove ScrollTrigger, you want to create an animation on scroll, so you first have to create the animation part before you can do the ScrollTrigger part, check out video below which is a great illustration how to work with ScrollTrigger

 

 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[cgeorgiev]

Thanks!

But the problem is that I am new to GSAP and have no idea how to achieve this. So I am asking for examples and help.

[mvaneijgen]

Hi @cgeorgiev welcome to the forum!

 

Check the link https://gsap.com/resources/get-started/ posted in the previous reply, this would be the starting point I would recommend anyone new to GSAP give a once over. It is not directly the solution you're looking for, but the beauty of GSAP is that you can build anything you like, the only thing holding you back is your own creativity. So I would first focus on the basics of the tools.

 

You could look for something similar, but personally I would start with something you have build your own that way you can really learn what the tools are capable of. https://codepen.io/GreenSock/collections/ here are all types of pens you could look for inspiration and below something that has the features you're looking for, but not the same layout. Again everything in GSAP starts with an animation, so I really encourage you to start with that and don't worry about ScrollTrigger. When you still need help be sure to post a minimal demo of what you've already tried and we be happy to point you in the right direction. Hope it helps and happy tweening! 

 

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

[cgeorgiev]

OK, here it is: 

See the Pen JjVJJjo by cgeorgiev (@cgeorgiev) on CodePen

 

When I scroll to Section 2, I want to pin it, than on scroll I want to show Tab 1, Tab 2, Tab 3 and Tab  4 (and select them in the nav element). And after than, I want to unpin Section 2 and go to section 3.

[mvaneijgen]

Lets tackle one questions at a time. 

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!I see a tween for the element .line-2 but I see no element in your html?

 

I've copied the logic from my post on stacking cards, because this is kinda the same effect. (Please read the post below it goes over some key points) Again it is so important to first focus on the animation you want to happen, so now with each content block animating in and out try adding the change of color of each tab index element, so that the correct one turns red when the correct element comes in. See how far you can come and shows us with an updated demo what you've tried when you get stuck. Hope it helps and happy tweening! 

 

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

 

 

 

 

[cgeorgiev]

Thanks. Still cant fix it. Anyone else that can help me?

[Rodrigo]

Hi,

 

Here are some demos that should help:

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

 

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

 

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

 

Happy Tweening!

[cgeorgiev]

I am stuck again. I want to add the class "selected" only to the current visible tab. And in addition, I want to make links active so if I click on any tab, I want to show the specific content on the right. Anyone with solution?

 

See the Pen MWRozVM by cgeorgiev (@cgeorgiev) on CodePen

[mvaneijgen]

Still, remove ScrollTrigger. Make is so much easier to see what is going on. I've removed your tween that had "+=500" this was add ing 500 seconds to the animation and now it seems to just add the class to each at a time. 

 

I'm not a fan of adding classes in tweens, I rather have GSAP handle all the chasing of properties. 

 

What I would do now is add labels to points your ant to scroll to. and then use the scrollTo plugin and the .labelToScroll() function https://gsap.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()/ to scroll to those labels you'e created. 

 

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

[cgeorgiev]

@mvaneijgen Thanks for helping.

 

I found another example, but I can't add sections above and below (spacers), so I can pin only the tabbed section. 

 

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

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Happy Tweening!

[cgeorgiev]

15 hours ago, Rodrigo said:

Hi,

 

Maybe something like this:

 

 

 

Happy Tweening!

Thank you very much!