Issues with page turning and regular content!

[sagexiang]

When there are regular parts before and after the content of this effect, the browser scroll bar will be confused and the page turning will be abnormal. What is the best way to achieve this situation? The built-in snap effect of GSAP is too slow. I hope to scroll up and down so that when I encounter a page turn, I can turn the page smoothly ~

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

[mvaneijgen]

Have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ instead of it using the scrollbar it just uses the scroll event itself and does logic based on that. 

 

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

 

And here an example that mixes normal scrolling with the Observer plugin 

 

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

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

Also take a look at this demo:

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

 

Happy Tweening!

[sagexiang]

10 hours ago, mvaneijgen said:

您是否见过观察者插件 https://gsap.com/docs/v3/Plugins/Observer/而不是使用滚动条，它只使用滚动事件本身并基于此执行逻辑。 

 

 

 

 

这是一个将普通滚动与观察者插件  混合在一起的示例

 

 

 

 

希望它有帮助，祝补间快乐！ 

I can see gsap.registerPlugin(ScrollTrigger) & gsap.registerPlugin(Observer)~
What is the relationship between Observer() and ScrollTrigger.observe()? Thank you~!

 

[GreenSock]

ScrollTrigger.observe() is just a way to create an Observer instance. It's identical functionally. Since Observer is used by ScrollTrigger, it's already inside that file, so we did that as a convenience so that if you're already using ScrollTrigger, you wouldn't need to load the Observer file separately.