In my Portfolio, I'm using the ScrollTrigger with Locomotive Scroll, (The code is below). I'm a newbie in JS. So, When I try to use batch method, locomotive scroll and everything with scrolltrigger breaks. It would be great if you can write some syntax for me (Just the batch method).
Codepen: https://codepen.io/SahiljeetSingh/pen/qBNedNK (I don't know why it isn't working on codepen, but this syntax (without batch method) works on my computer).
gsap.registerPlugin(ScrollTrigger);
// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
const locoScroll = new LocomotiveScroll({
el: document.querySelector(".data-scroll-container"),
smooth: true,
smoothMobile: true
});
// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
locoScroll.on("scroll", ScrollTrigger.update);
// tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things
ScrollTrigger.scrollerProxy(".data-scroll-container", {
scrollTop(value) {
return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
}, // we don't have to define a scrollLeft because we're only scrolling vertically.
getBoundingClientRect() {
return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
},
// LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
pinType: document.querySelector(".data-scroll-container").style.transform ? "transform" : "fixed"
});
let exptl = gsap.timeline({
scrollTrigger:{
trigger: ".z-out",
start: "top 85%",
end: "top 5%",
scrub: 2,
markers: true
}
});
exptl.from(".z-out", {
x: 100,
opacity: 0,
duration: 1
});
// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();