Jump to content
Search Community

How to kill a scrollTrigger behavior inside a gsap.to()

Michael31 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello, 

I gradually change the background color of my viewport when an element appears.

I would like to gradually go back to the normal when this same element disappears from the viewport if you're keep scrolling.

Is is possible to do so inside the same scrollTrigger object ?

 

 I tried to do the exit animation with another gsap.to() but it jumped.

Thanks you very much

 

See the Pen GRNJGYb by michaelgrc (@michaelgrc) on CodePen

Link to comment
Share on other sites

Hi @Michael31,

 

You'll likely need another ScrollTrigger instance to tell GSAP when the section is leaving the viewport.

Otherwise, you could set up your animation to scrub all the way to the end of your section, with this you'd want to shorten the duration of the initial bg-color animation and adding a blank tween to just finish the scrub, then run a 'back-to-normal' tween onLeave or onComplete

  • Like 2
Link to comment
Share on other sites

Yeah, like elegantseagulls said there are multiple ways to set this up depending on your exact needs:

  • Use two ScrollTriggers.
  • Use one on a timeline and have blank space between your two tweens.
  • Use one and put the animations inside of the callbacks.
  • Use one and use toggleActions to play forward and reverse on either side.
  • Like 3
Link to comment
Share on other sites

Thanks for your answers.

I tried to combine the scrub and the toggleActions properties but I can't make it work. 

Does toggleActions can work when scrub is activated ?

 

So I finally chose to use two ScrollTriggers. But eventually it jumps when the second transition plays

 

Does anyone see what I'm missing ?

 

 

Link to comment
Share on other sites

  • Solution
2 hours ago, Michael31 said:

Does anyone see what I'm missing ?

 

Hey @Michael31

 

You are actually making one of the most common ScrollTrigger mistakes by creating .to() logic issues.

Setting an immediateRender: false like to be seen in the docs, fixes your issue.

 

Cheers :) 

 

Edit:

 

Quote

I tried to combine the scrub and the toggleActions properties but I can't make it work. 

Does toggleActions can work when scrub is activated ?

 

To also answer this question:

No, they can not be combined. With toggleActions you tell ScrollTrigger how it should affect the playstate of the tween on enter/leave. But since you are using scrub, you are already doing this by telling it to be scrubbed along the ScrollTrigger's total distance.

  • Like 2
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.
×
×
  • Create New...