Vaibhav Sidapara

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, } });

Hi, I think I found the issue but I don't know how to solve it. Since the background is initially set to opacity: 0 in the CSS and later the first scrollTrigger changes opacity to 1 but later once the opacity is triggered to 0 (from another scrollTrigger) then when you scroll back the opacity remains 0. I hope you can understand.

Hi ZackSaucier, No, I want to scrub back. What I meant was that if you check the codepen and you scroll all the way down and and then you scroll back up the animations don't play in reverse. What exactly is I'm doing wrong here!?

Hi ZachSaucier, I have linked the codepen URL to the actual post, I hope this will be useful!? I just want to know what I'm doing wrong here, If you notice Page 7 appears two times. I thought if I use timeline I'll be able to sync it. Also if I scroll back up, all the affects/animation will not go backwards. Thanks!

Hi, I'm new to GSAP. I just wanted to check if I can use timeline and scrolltrigger on the same trigger element. I'm getting issues specially when I try to scroll back. Below is the code. gsap.timeline() .to(".background-scene", { opacity: 0, scrollTrigger: { trigger: ".page-7", pin: true, scrub: 0.5, markers: true } }) .fromTo(".background-scene-2", { opacity: 0 }, { opacity: 1, scrollTrigger: { trigger: ".page-7", pin: true, scrub: 0.5, markers: true } }) .to(".background-scene-2", { opacity: 0, scrollTrigger: { trigger: ".page-9", pin: true, scrub: 0.5, markers: true } }) .to(".background-scene-3", { opacity: 1, scrollTrigger: { trigger: ".page-9", pin: true, scrub: 0.5, markers: true } });