Timeline with ScrollTrigger with same trigger points

[Vaibhav Sidapara]

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

Edited August 12, 2020 by Vaibhav Sidapara
Codepen URL added

[ZachSaucier]

Hey Vaibhav and welcome to the GreenSock forums. 

 

It doesn't make much sense to put ScrollTriggers on tweens inside of timelines because the ScrollTriggers would be in conflict with the timeline's playhead. 

 

You should either use regular tweens with ScrollTriggers or apply a ScrollTrigger to the timeline itself. I'm betting that in this case you should just apply a ScrollTrigger to the timeline itself but without seeing a demo and understanding the effect that you want it's hard to say.

[Vaibhav Sidapara]

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!

[ZachSaucier]

1 hour ago, Vaibhav Sidapara said:

if I scroll back up, all the affects/animation will not go backwards

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:

 

[Vaibhav Sidapara]

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

 

[Vaibhav Sidapara]

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. 

[ZachSaucier]

8 hours ago, Vaibhav Sidapara said:

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. 

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.

[Vaibhav Sidapara]

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

 

 

 

[ZachSaucier]

You've got a lot of ScrollTriggers. I think it'd be helpful to take a step back and organize your code a bit. Start simply, focused on just the first animation. Get it working the way you want to then add the second one. Once you run into an issue that you can't figure out, post here and I'll be happy to help.