GSAP sticky section with vertical scrolling

[NOFX77]

Hello guys first post here and new to GSAP. Ive look around and didn't find nothing quite for what I want.

I want to scroll trough the page and when it reach a certain section I want to lock the page/section and scroll into it and when all the content is scrolled unlock the section/page to see the reste of the page. Any ideas? In my code pen the page lock but I am not able to scroll the content inside the snap div. Also I am using Lenis scroll to smooth things up.

 

thanks

See the Pen JjQOMzo by martinn77 (@martinn77) on CodePen.

[mvaneijgen]

Hi @NOFX77 welcome to the forum!

 

Everything to do with GSAP starts with an animation, so before you do anything to do with scrolling you first have to setup the animation you want to happen on scroll. In the below pen I've moved your ScrollTrigger logic to a timeline and comment it out. Then on the timeline I've animated each slide, I of course don't know what you want your slides to do, so I did something random. If you like you can uncomment the ScrollTrigger code in the timeline, to see how the animation feels, but when you want to edit the animation I highly recommend removing the ScrollTrigger logic again and use GSDevTools (a premium plugin you can use for free on codepen!) to easily debug your animation. 

 

Then when you're happy with the animation you can enable ScrollTrigger again en the rest of your HTML and you're set! The logic how this works and why I've written out fully in another post, so if you're interested and want some more background info, check it out. 

 

 

GSAP also has its own smooth scroll library aptly named ScrollSmoother (https://gsap.com/docs/v3/Plugins/ScrollSmoother) and works out of the box with everything GSAP, so that could be a route your could explore. 

 

Hope it helps and happy tweening! 

 

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

[NOFX77]

@mvaneijgen thanks for comment it help a lot. Now im almost where I want to be. I add a little nav to help to visualise how many slides we have and I want to be able to click on them to reposition the slide to the one selected. I see a-lot of examples on the forum like this one so I try to implemented in my example im almost there but not quite. Any ideas on what I do wrong with the anchor link? 

For ScrollSmoother I read the docs and I dont find anywhere the link for the CDN it look like we have to be member to get it? Am I wrong?

 

I have added ScrollSmoother like this : 

 

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, ScrollSmoother);

ScrollSmoother.create({
  smooth: 1,
  effects: true,
  normalizeScroll: false,
  ignoreMobileResize: true,
});

But always have the error : 

ScrollSmoother is not defined

See the Pen NWZwmrp by martinn77 (@martinn77) on CodePen.

 

Thanks

[Rodrigo]

Hi,

 

The reason ScrollSmoother is not on the CDN links is because is a paid tool (Club GSAP benefit).

https://gsap.com/pricing/

 

You can try all of our plugins (free and paid) on codepen forking this demo:

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

 

Also you can try them on Stackblitz, Codesandbox and localhost using the GSAP Trial package, but those projects can't be deployed though, since GSAP Trial won't work in domains other than the three I just mentioned:

https://www.npmjs.com/package/gsap-trial

 

Happy Tweening!

[NOFX77]

@Rodrigo thank you for your answer. Any ideas on what is my problem, with the anchor links?

[Rodrigo]

Hi,

 

These demos should provide a solid starting point:

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

 

See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[NOFX77]

Thanks, this is exactly the example I implemented in my codepen without success

[mvaneijgen]

Check out my post on this and also the second comment it has some great helper functions. Personally what I find the easier is to add labels to my timeline and then just create buttons that scroll to that specific label, that way you have the most control without a whole lot of setup. Hope it helps and happy tweening!