First of all, thanks for the feedback. I tried using your method as well as tried using onLeave/onEnter but I still face the issue of css. Specially, when I'm scaling or changing opacity of the element. I've attached the latest version codepen here:
https://codepen.io/vaibhav_sid/pen/MWyvWGo
1) The scaling for second scrollTrigger will start from 1 instead of 1.5. for example :
gsap.to(".background-1", {
scale: 1.5,
scrollTrigger: {
trigger: ".page-2",
pin: true,
scrub: true,
onLeave: () => {
gsap.set(".background-1", {scale: 1.5});
}
}
});
gsap.to(".background-1", {
scale: 1.7,
scrollTrigger: {
trigger: ".page-3",
pin: true,
scrub: true,
onEnter: () => {
gsap.set(".background-1", {scale: 1.5});
console.log("onEnter");
}
}
});
2) The opacity will remain 0 even if I have used onEnterBack to change the opacity!!
gsap.to(".background-1", {
opacity: 0,
scrollTrigger: {
trigger: ".page-4",
pin: true,
scrub: true,
onEnterBack: () => {
gsap.set(".background-1", {opacity: 1});
console.log("enter back");
}
}
});
gsap.to(".background-2", {
opacity: 1,
scrollTrigger: {
trigger: ".page-4",
pin: true,
scrub: true,
}
});