Prevent Reverse of scrollTrigger scrub:true
How do I prevent reversing when the user scrolls back up the page?
gsap.to(".img-container", {
scale: 1.8, x: "-30%", y: "30%",
scrollTrigger: {
trigger: "#home-hero",
start: "-107px",
end: "+=120%",
//markers: true,
pin: true,
scrub: true
}
});
If my assumptions above are correct, I'd imagine it could look like this:
let tween = gsap.to(".img-container", {scale: 1.8, xPercent: -30, yPercent: 30, paused: true});
ScrollTrigger.create({
trigger: "#home-hero",
start: "-107px",
end: "+=120%",
pin: true,
onUpdate: self => {
if (self.direction === 1 && self.progress > tween.progress()) {
tween.progress(self.progress);
}
}
});
Does that help?
