Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
b7Afonso7

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

Recommended Posts

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

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×