search

alvarotrigo / react-fullpage

Official React.js wrapper for fullPage.js https://alvarotrigo.com/react-fullpage/
GNU General Public License v3.0
1.28k stars 179 forks source link

Enable scrollbar cause scroll behavior laggy #326

Open meisken opened 2 years ago

meisken commented 2 years ago

After I updated to 0.1.24, The flickering was fixed perfectly. But the scroll behavior became so laggy. During the video, you can see the difference after I remove the scrollbar option. It's much smoother.

https://user-images.githubusercontent.com/38470704/168143227-4f7c813c-cdec-4709-98af-6b394dd05e23.mp4

Reproduction code: https://codesandbox.io/s/react-fullpage-js-example-forked-ylxyp2?file=/src/index.js

alvarotrigo commented 2 years ago

Do you have any FPS problems? Try showing the FPS counter in Chrome and see if you see any difference.

From my side, I can't see any neither on the FPS counter nor with my eyes.

Does removing the easing option change anything for you?

meisken commented 2 years ago

I made a new comparison video and I enable the frame rendering stats. I'm using Chrome as well. Obviously, I don't have fps problem and there's a delay on the video left side.

https://user-images.githubusercontent.com/38470704/168214784-70e55e6e-088a-4c62-9208-8aa4a56e46a5.mp4

alvarotrigo commented 2 years ago

I guess that can be expected. The CSS animation uses CSS 3d transformations which will use hardware acceleration.

The animation when the scroll bar is enabled is performed using JS and the scrollTo function. This won't use hardware acceleration as far as I know.

However, I'll be making some improvements on this so we can keep on testing things out. I'll be replacing the setTimeout for a requestAnimationFrame to see if you notice any improvement.

I'll keep you posted whenever I have a version you can try.

meisken commented 2 years ago

Did 0.1.24 completely change how the scroll works? Before 0.1.24, It doesn't have this performance issue. I'm not sure if the older version uses the scrollTo function as well? The thing is in the older version, the scroll is smooth and the gsap scrollTrigger animation is smooth as well.

alvarotrigo commented 2 years ago

Can you test it again with the files ont he dev branch? https://github.com/alvarotrigo/react-fullpage/tree/dev/dist

You can also install the dev branch from npm directly if you prefer:

npm install "https://github.com/alvarotrigo/react-fullpage.git#dev" --save

Note on the dist files you'll find the version 4.0.8 of fullPage.js where I replaced setTimeout for requestAnimationFrame.

alvarotrigo commented 2 years ago

Did 0.1.24 completely change how the scroll works? Before 0.1.24, It doesn't have this performance issue.

The option fitToSection changed its behavior and will now make use of the CSS scroll snaps feature. Therefore now it is not the window element scrolling but the body. But I don't think this can create performance issues?

The body will now use scroll-snap-type: y mandatory and scroll-behavior: smooth properties. Perhaps this is?

alvarotrigo commented 2 years ago

You can try using fitToSection: false and see if this fixes your issue too.

meisken commented 2 years ago

fitToSection: false can solve this issue even in the 0.1.24 version. And "requestAnimationFrame version" doesn't change anything.

It seems like it's not a performance issue. Properly, It's because CSS scroll snaps run immediately after the screen is close to the nearby section. which means CSS scroll snaps will be triggered when the screen is about to leave a section or about to enter a section. Eventually, the fullpagejs scroll and CSS scroll snaps will run together. And it causes the screen looks like laggy.

Personally, I think GSAP scroll snap is so much better. GSAP provides so much more control than CSS scroll snaps.

meisken commented 2 years ago

delete

alvarotrigo commented 2 years ago

Eventually, the fullpagejs scroll and CSS scroll snaps will run together.

I don't think this is what is happening. fullPage.js has total control over the scroll. Speed, easing effect etc. And CSS snaps is disabled until the scrolling stops.

The only difference is that now we are scrolling the body element instead of the window.

Personally, I think GSAP scroll snap is so much better. GSAP provides so much more control than CSS scroll snaps.

Can you share any examples? Perhaps we can implement it in a similar way for fullPgae.js.

meisken commented 2 years ago

Here's the gsap snap example: https://codepen.io/petebarr/pen/qBOeVoz

Here's the basic: https://www.youtube.com/watch?v=X7IBa7vZjmo&t=891s

doc: https://greensock.com/docs/v3/Plugins/ScrollTrigger. Snap is one of the ScrollTrigger properties.

alvarotrigo commented 2 years ago

Here's the gsap snap example: https://codepen.io/petebarr/pen/qBOeVoz

Yeah, they don't seem to be using the CSS snaps property. They are doing it all on their side like fullPage.js was doing in version 3, although a bit differently.

Perhaps this is the way fullPage.js should go too. The CSS snaps feature creates a bit of trouble.