b7Afonso7 Posted October 4, 2021 Share Posted October 4, 2021 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 More sharing options...
Cassie Posted October 4, 2021 Share Posted October 4, 2021 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now