[Timeline with ScrollTrigger with same trigger points]

On 8/28/2020 at 8:30 PM, ZachSaucier said:

That means you're not just wanting to prevent going backwards. That means you want to set new styles once the ScrollTrigger has completed. To do that, use the onComplete for the ScrollTrigger and gsap.set() whatever styles you need to changes.

 

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: 

 

See the Pen MWyvWGo by vaibhav_sid (@vaibhav_sid) on CodePen

 

 

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

 

 

 

[Timeline with ScrollTrigger with same trigger points]

1 hour ago, Vaibhav Sidapara said:

 

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,

 

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. 

[Timeline with ScrollTrigger with same trigger points]

On 8/13/2020 at 1:33 AM, ZachSaucier said:

So you want it to scrub but only forwards (i.e. people can't go backwards thought the animation)? If so, I talk about how to do that in this thread:

 

 

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!?

 

[Timeline with ScrollTrigger with same trigger points]

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!

[Timeline with ScrollTrigger with same trigger points]

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

 

See the Pen qBZbWyj by vaibhav_sid (@vaibhav_sid) on CodePen