Scroll snap for specific section and wait before snapping

[TruongNH]

I have been stuck here for a week.

 

I'm trying to make a scroll snap from section 1 to section 2 with a delay time for exit animation and reverse. From section 2 to section 4 it can be a normal scroll.

 

I'm using overflow: hidden that I can't let it go. This is the reason that I think it prevents me from scrolling snap and normal scroll.

 

The scroll way I try to achieve is exactly the same as this website: David | Creative Developer (david-hckh.com)

 

Here is the codesandbox : https://codesandbox.io/s/scroll-rfjx9k

 

How can I achieve this ? 

 

 

Please help me with this....

[Rodrigo]

Hi @TruongNH and welcome to the GreenSock forums!

 

Actually that site is not using scrolling at all if you inspect with devtools. Is actually moving things on the Y axis.

 

For that you can use the Observer Plugin:

https://greensock.com/docs/v3/Plugins/Observer

 

That doesn't mean that this can't be done with ScrollTrigger. You can combine it with the ScrollTo Plugin in order to achieve this effect:

https://stackblitz.com/edit/vitejs-vite-d73sck?file=src%2Fviews%2FLayers.jsx

 

Navigate to the Layers Section route in order to see it in action.

 

Hopefully this helps.

Happy Tweening!

[TruongNH]

Thanks for giving a solution. I have tried to use Observer to snap between landingpage(section 1) and scroll-container (section 2) .

 

But I have a problem I can't scroll snap between section 1 and section 2 and freescroll for scroll-container.

 

Where am I wrong and where am I lacking ?

 

Here is the code sandbox: scroll - CodeSandbox

[TruongNH]

On 9/26/2023 at 7:06 AM, Rodrigo said:

Hi @TruongNH and welcome to the GreenSock forums!

 

Actually that site is not using scrolling at all if you inspect with devtools. Is actually moving things on the Y axis.

 

For that you can use the Observer Plugin:

https://greensock.com/docs/v3/Plugins/Observer

 

That doesn't mean that this can't be done with ScrollTrigger. You can combine it with the ScrollTo Plugin in order to achieve this effect:

https://stackblitz.com/edit/vitejs-vite-d73sck?file=src%2Fviews%2FLayers.jsx

 

Navigate to the Layers Section route in order to see it in action.

 

Hopefully this helps.

Happy Tweening!

Thanks for giving a solution. I have tried to use Observer to snap between landingpage(section 1) and scroll-container (section 2) .

 

But I have a problem I can't scroll snap between section 1 and section 2 and freescroll for scroll-container.

 

Where am I wrong and where am I lacking?

 

Here is the code sandbox: scroll - CodeSandbox

[Rodrigo]

Hi,

 

There are a few things to notice here.

 

The site you posted as an example doesn't use scrolling at all. That doesn't mean that is not possible, is just weird to have natural scroll, having the scroll bar visible and not being allowed to scroll. These examples combines ScrollTrigger with Observer:

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

 

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

 

Finally you are using your ScrollManager file as a React component. While I can see the value of abstraction and keeping your code more organized IMHO I don't see that as a good and solid approach. Keep in mind that in React child component are rendered first and then their parents, so the code in that particular file runs before the DOM elements are mounted in the DOM on t he first run, so you could get some errors there. Also you are not using effect hooks, GSAP Context or doing proper cleanup in your app. I'd strongly recommend you to create your GSAP code in the same file it'll be used at first and then start abstracting away and micro-optimizing your code. First make it work the way is supposed and make it as easy to follow as possible (comments are helpful here), then make it pretty. Finally read the resources in this page:

 

Hopefully this helps.

Happy Tweening!

[TruongNH]

On 9/27/2023 at 10:51 PM, Rodrigo said:

Hi,

 

There are a few things to notice here.

 

The site you posted as an example doesn't use scrolling at all. That doesn't mean that is not possible, is just weird to have natural scroll, having the scroll bar visible and not being allowed to scroll. These examples combines ScrollTrigger with Observer:

 

 

 

 

 

 

Finally you are using your ScrollManager file as a React component. While I can see the value of abstraction and keeping your code more organized IMHO I don't see that as a good and solid approach. Keep in mind that in React child component are rendered first and then their parents, so the code in that particular file runs before the DOM elements are mounted in the DOM on t he first run, so you could get some errors there. Also you are not using effect hooks, GSAP Context or doing proper cleanup in your app. I'd strongly recommend you to create your GSAP code in the same file it'll be used at first and then start abstracting away and micro-optimizing your code. First make it work the way is supposed and make it as easy to follow as possible (comments are helpful here), then make it pretty. Finally read the resources in this page:

 

Hopefully this helps.

Happy Tweening!

@Rodrigo Thanks for your instructions. I have tried with your instructions and I have reached the snap between section 1 and section 2. But for a normal scroll from section 2 I have overflow: hidden. So I'm trying to make a normal scroll by Y. Currently I'm using auto-increase height. I want to make it scroll value height.

 

How can I reach that? 

This is what I have reached: https://codesandbox.io/s/scroll-rfjx9k

 

[Rodrigo]

Hi,

 

Your example is a quite convoluted IMHO. Again I don't see the benefit of that ScrollManager.js file that you are using like a component. If you want to use that approach I would suggest a custom hook, but not a component.

 

You're still not using GSAP Context, as suggested in the articles you can read in the link I provided in my previous post.

 

Unfortunately we don't have te time resources to create custom solutions for our users, solve complex logic issues or comb through large codebases trying to find errors and or issues, so I can't create a port to React of this example at the moment. The best I can do is create a Codepen example fo multiple Observer sections:

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

 

The JS logic is not out of this world and you should be able to port it to React by following our guide to use GSAP in React environments.

 

I think your best alternative is to create something as simple as possible and start adding enhancements to it as you go along.

 

Hopefully this helps.

Happy Tweening!