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
