flickering line between page sections

[victorcodess]

Hello there! Thank you so much for this wonderful package. The smooth scrolling seems to be working pretty fine, but while scrolling through sections on my page, I get this flickering line between them which fades off after I stop scrolling. I went through the docs and added the

html,
body {
  overscroll-behavior: none;
}

to my css file, but it doesn't seem to solve anything. It's a single page next.js website and here is the structure of my page.tsx:

return (
    <ScrollerMotion>
      <main className="flex flex-col items-center justify-center">
        <Hero />
        <Work />
        <About />
        <Contact />
        <Footer />
      </main>
    </ScrollerMotion>
  );

Is there a way to solve this? Thank you for your time!

[breadadams]

Hi @victorcodess, those styles you refer to are for preventing the "elastic" overscroll effect, I don't think they are related to the issue you described.

Could you please provide a minimal reproduction? Either a repository or something like a CodeSandbox or StackBlitz demo.

[victorcodess]

The bug seems to be fixed now, but it seems I'm still having some performance issues while scrolling.

Here's a CodeSandbox demo: https://codesandbox.io/p/github/victorcodess/folio-v1/main?file=%2FREADME.md&workspaceId=a61b127f-67eb-4889-bf03-a02cb268a5d9

[breadadams]

@victorcodess I can't access the codesandbox, I think you'll need to adjust the permissions:

[victorcodess]

Sorry about that, here's the adjusted url:

https://codesandbox.io/p/github/victorcodess/folio-v1/main?file=%2FREADME.md&workspace=%257B%2522activeFileId%2522%253A%2522clfmgpqke0001g2gi4kk06oo4%2522%252C%2522openFiles%2522%253A%255B%2522%252FREADME.md%2522%252C%2522%252Fapp%252Fpage.tsx%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clfmgpwmn000x376ibj57ip2t%2522%253A%257B%2522key%2522%253A%2522clfmgpwmn000x376ibj57ip2t%2522%252C%2522name%2522%253A%2522Default%2522%252C%2522devtools%2522%253A%255B%257B%2522type%2522%253A%2522SYSTEM_METRICS%2522%252C%2522key%2522%253A%2522clfmidv0n04mc376i6gu2ozd8%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522key%2522%253A%2522clfmgq66m008a376iethnuijv%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D%257D%252C%2522currentSpace%2522%253A%2522clfmgpwmn000x376ibj57ip2t%2522%252C%2522spacesOrder%2522%253A%255B%2522clfmgpwmn000x376ibj57ip2t%2522%255D%252C%2522hideCodeEditor%2522%253Afalse%257D

I honestly don't know why it's this long though.

[breadadams]

Hey @victorcodess, ideally the repro should be a smaller example where I can reproduce the bug, as unfortunately I can't be debugging an entire app. In doing so it's also likely that you come across the combination of code/libraries that's causing the issue.

I did however play around with the code a little, and noticed this CSS being applied after the initial page load:

It looks like after your preloader animation has finished, when you change overflow-y from hidden to scroll, it changes back to hidden not long after for a couple of seconds.

Also not too sure about how compatible the blobity library is, would need to be tested in a more isolated environment of just scroller-motion + blobity to confirm.

[victorcodess]

Hello @breadadams, thank you so much for your assistance. I've been able to resolve the issue with the preloader, it seems the bug was from the gsap timeline setup in the loader.js file.

Concerning the performance issues, I'm assuming it's not directly tied to scroller-motion but to the performance of the entire website/browser. I tried testing again and it seems to work fine at times, especially in incognito mode or when only a few tabs are open.

[victorcodess]

But, when you enable scrollermotion the navbar navigation doesn't work. You can see a reproduction in the codesandbox.

[breadadams]

@victorcodess probably related to #4, see the solution here: #4 (comment)

[victorcodess]

This doesn't really solve the problem, because the navabar was never in the ScrollerMotion component. I am able to scroll to a section in the ScrollerMotion component when it is commented out, but once I uncomment it, the click to scroll functionality seizes to work.

Here is the code structure:

<>
      <PreLoader />

      <NavBar />

      <ScrollerMotion>
      <main className="flex flex-col items-center justify-center">
        <Hero />
        <Work />
        <About />
        <Blog />
        <Contact />
        <Footer />
      </main>
      </ScrollerMotion>
</>

You can view the demo in the link above. Thank you!

[seanjermey]

Adding a unstyled containing div fixed this for me

<ScrollerMotion>
  <div>
     ....
  </div>
</ScrollerMotion>