Scrollsmoother jumps and blinks

[Nextleveles]

Hi, we are implementing Scrollsmoother in a site, all works perfectly except in a huge page with multiple lazyload images, filters, and a mp4, it seems that it needs to load all page to avoid blinkins and small jumps that makes the page not scroll smooth.

 

When I arrive at the end of the page, everything seems to work perfect, but in the process the scroll does not seems nice.

 

We are using the .refresh() but it does not solves for this page.

 

Sorry cant share the link, but if "GASP" may help I can provide in private.

[Cassie]

Hi @Nextleveles, welcome to the GSAP forums and thanks for being part of club GreenSock.

I'm afraid we can't offer free performance consulting on live sites in these forums, however we can offer consulting for a fee if that's something you're interested in. 

If you'd like help here, could you provide a minimal demo so that we can assist. We don't need to see the actual site or any of the design, just make an example on codepen that replicates the issue in the most minimal way possible. Build up from scratch. Lazyload some large images, pop in a few mp4's and add some lorem ipsum text in until you hit the issue.

I would hazard a guess and say that the issue is likely just that your page is 'huge' - smooth scroll is really ideal for small artistic sites, the longer the page and the more you have going on, the more issues you'll have with performance.

Either that or you're calling .refresh incorrectly or at the wrong time? Impossible to tell without seeing the code.

 

Look forward to seeing your demo and helping you sort this out!

 

Chat soon

[Nextleveles]

Thanks @Cassie I am trying to fix it, but it looks that page content is not loaded in full ( lazy load images, and videos ) so when I scroll down it tries to recalculate using the refresh, but I cant see any other solution that waiting to the full page load before using the scroll and maybe disable the lazy, dont know.

[GreenSock]

1 hour ago, Nextleveles said:

Thanks @Cassie I am trying to fix it, but it looks that page content is not loaded in full ( lazy load images, and videos ) so when I scroll down it tries to recalculate using the refresh, but I cant see any other solution that waiting to the full page load before using the scroll and maybe disable the lazy, dont know.

It doesn't call a .refresh() unless the viewport resizes or the tab goes from hidden to visible, so I kinda doubt this is the case. 

 

Also, please read this thread (at least my most recent answer) - does the beta work better for you? 

 

 

[Nextleveles]

Thanks, Cassie, the issue probably is that we are animating huge element 6000 height all the time on scroll, thats slow.  Is there any way scroll only by sections?

[OSUblake]

1 hour ago, Nextleveles said:

Is there any way scroll only by sections?

 

Not at the moment, but it's something we can explore for a future version. 

 

If the size of the page is indeed causing issues, I would try setting the visibility of sections that are out of view to hidden to see if that might help.

 

[Nextleveles]

14 hours ago, OSUblake said:

 

Not at the moment, but it's something we can explore for a future version. 

 

If the size of the page is indeed causing issues, I would try setting the visibility of sections that are out of view to hidden to see if that might help.

 

Thanks Osu, any example? I dont know how to solve this.

[GreenSock]

You could break things up into sections wrapped in <div class="scroll-section">...</div> and then:

gsap.utils.toArray(".scroll-section").forEach(el => ScrollTrigger.create({
    trigger: el,
    start: "top 120%",
    end: "bottom -20%",
    onToggle: self => {
      el.style.opacity = self.isActive ? "1" : "0";
      el.style.pointerEvents = self.isActive ? "all" : "none";
    }
  })
);

...which just hides them when they're 20% outside the viewport.

 

Does that help at all? 

[Nextleveles]

Thanks so much, will try that for tomorrow but it seams will work,

Is there anyway to integrate this with lazyload and barbajs?

 

 

[GreenSock]

I can't imagine why it wouldn't be possible but I'm not familiar with either of those.