Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vaibhav Sidapara

Timeline with ScrollTrigger with same trigger points

Recommended Posts

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 by Vaibhav Sidapara
Codepen URL added
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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:

 

Link to comment
Share on other sites

  • 3 weeks later...
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!?

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

 

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×