Normal scroll with Observer when body have overflow hidden

[TruongNH]

I have stuck to make a normal scroll with Observer.

 

I have scroll snapped from sections 1 to 2 and from sections 2 to 4 scroll normally with Observer. The body has overflow: hidden that I can't remove. 

Currently, the normal scroll I make by increasing progress to test. I'm trying to make it scroll by translate y with the mouse or wheel scroll value.

 

This is the code sandbox: https://codesandbox.io/s/scroll-rfjx9k

How can I reach that?

 

Please help me .

Thanks so much

 

[mvaneijgen]

Hi @TruongNH can you maybe explain why you would want to do that? Why would you fake the scroll if there is a perfectly usable scroll that you can use, that works 100% of the time? 

 

Maybe this helps mixing Observer and just native scrolling? 

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

 

Hope it helps and happy tweening! 

[TruongNH]

3 minutes ago, mvaneijgen said:

Hi @TruongNH can you maybe explain why you would want to do that? Why would you fake the scroll if there is a perfectly usable scroll that you can use, that works 100% of the time? 

 

Maybe this helps mixing Observer and just native scrolling? 

 

 

 

Hope it helps and happy tweening! 

Thanks for your reply.

 

 My project has a follow cursor that only works when the overflow is hidden. So I have to use the Observer to fake the scroll. Furthermore, I'm trying to make a page with a scroll like this David | Creative Developer (david-hckh.com). 

 

When I inspect the page. I can see it uses snap from sections 1 to 2 by top attribute and from section 2 the page uses transform by Y attribute.

 

That's why I'm trying to reach the normal scroll with scroll value 

[mvaneijgen]

That page doesn't scroll vertically for me? Here is a mouse follow effect with GSAP with which you can scroll over the page and everything works fine (from the docs https://greensock.com/docs/v3/GSAP/gsap.quickSetter())

 

See the Pen OJrweOx by mvaneijgen (@mvaneijgen) on CodePen

 

I've marked the topic, maybe someone else has a good idea. 

[TruongNH]

18 minutes ago, mvaneijgen said:

That page doesn't scroll vertically for me? Here is a mouse follow effect with GSAP with which you can scroll over the page and everything works fine (from the docs https://greensock.com/docs/v3/GSAP/gsap.quickSetter())

 

 

 

I've marked the topic, maybe someone else has a good idea. 

I don't stand your meaning with the page doesn't scroll vertically for you. 

 

By the way, with the mouse follow with gsap you send. Is possible to increase speed of follow mouse ?

[mvaneijgen]

https://www.david-hckh.com this page does not scroll for me and I think it should scroll, but that is what you get when you try to hack the scroll on webpages, it just doesn't work for 100% of your visitors. So that is why I personally would never hack the scroll.

 

5 minutes ago, TruongNH said:

By the way, with the mouse follow with gsap you send. Is possible to increase speed of follow mouse ?

 

sure just increase the duration: 0.6, to some lower value. 

[Rodrigo]

Hi @TruongNH,

 

You already created a thread involving the exact same code here:

In fact your codesandbox link is the same and you haven't followed the advice I gave you in the other thread about using GSAP Context and simplifying your setup.

 

Once again, as I mentioned in the other thread, we don't have the time resources to provide general consulting in these free forums. In the other thread I provided a link to our GSAP & React page with a couple of articles and several examples that should help you. Finally I'd strongly recommend you (again) to start simple and then add more complexity to your app.

 

Good luck with your project!

Happy Tweening!

[TruongNH]

22 minutes ago, Rodrigo said:

Hi @TruongNH,

 

You already created a thread involving the exact same code here:

In fact your codesandbox link is the same and you haven't followed the advice I gave you in the other thread about using GSAP Context and simplifying your setup.

 

Once again, as I mentioned in the other thread, we don't have the time resources to provide general consulting in these free forums. In the other thread I provided a link to our GSAP & React page with a couple of articles and several examples that should help you. Finally I'd strongly recommend you (again) to start simple and then add more complexity to your app.

 

Good luck with your project!

Happy Tweening!

Sorry for the inconvenience, I have followed your recommendation and started from simple. I also added Gsap context to the project based on your advice but I forgot to update it on code sandbox.

But I  still have problems with normal scroll cause I have an overflow and it affects the follow cursor. But in your example is not using overflow: hidden.

Thanks to mvaneijgen Now I change to the follow cursor using gsap and the problem disappears. And I can disable the overflow now to make it normal. And I think there's no problem
Thanks to @Rodrigo and @mvaneijgen for support me.