Horizontal ScrollTrigger Issue in Chrome browser where scrolling is laggy between snaps

[b7Afonso7]

Hi!

 

We have an issue in Chrome on normal laptop size for example 1440px 730px. (Any bigger screen size it works fine, and other browsers work fine) Where the scrolling or snapping between sections are laggy and freezes. 

 

We are using scrollTrigger on a Horizontal slider, we need to add active classes on each section for images and animation - once the user is in view of a section, we have implemented a solution to add active classes to the sections see code below. 

 

gsap.registerPlugin(ScrollTrigger);

const sections = gsap.utils.toArray(".section");
let maxWidth = 0;

const getMaxWidth = () => {
  maxWidth = 0;
  sections.forEach((section) => {
    maxWidth += section.offsetWidth;
  });
};
getMaxWidth();
ScrollTrigger.addEventListener("refreshInit", getMaxWidth);

gsap.to(sections, {
  x: () => `-${maxWidth - window.innerWidth}`,
  ease: "none",
  scrollTrigger: {
    trigger: "#egg--journey",
    pin: true,
    scrub: 2,
    end: () => `+=${maxWidth}`,
    invalidateOnRefresh: false,
     snap: directionalSnap(1 / (sections.length - 1)),
    // scroller: '#block-amdocseastereggblock',
  }
});

sections.forEach((sct, i) => {
  ScrollTrigger.create({
    trigger: sct,
    start: () => 'top top-=' + (sct.offsetLeft - window.innerWidth/2) * (maxWidth / (maxWidth - window.innerWidth)),
    end: () => '+=' + sct.offsetWidth * (maxWidth / (maxWidth - window.innerWidth)),
    toggleClass:
      {
        targets: sct,
        className: "active"
      },
  });
});

Thanks in advance

 

[Cassie]

Hi Afonso,

Sorry about this, it sounds very frustrating. However, animation issues are rarely down to the GSAP code itself.

The usual issues are the properties that are being animated. Sometimes this is non-composite properties like width height etc, maybe gradients, filters, masks etc. Very large images can also be an issue.

It's very difficult for us to help debug without a minimal demo as we'd need the context of the HTML and CSS to understand what's happening.

Even with a demo though - specific performance/browser quirks are a little out of the scope of these forums to help with.