Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
GiGiX

onLeave triggers faster than expected

Go to solution Solved by akapowl,

Recommended Posts

Hello,

 

I would like to trigger a click event onLeave, but it triggers faster. However I think the start/end positions are good. Maybe the animations before affect it?

 

ScrollTrigger.create({
  trigger: ".triggerClick",
  scrub: true,
  start: "top bottom",
  end: "bottom bottom",
  onLeave: () => alert(1),
});

 

What did I miss? Thank you!

See the Pen ExvVryj by rryp111 (@rryp111) on CodePen

Link to comment
Share on other sites

  • Solution

Hi there @GiGiX

 

2 hours ago, GiGiX said:

What did I miss?

 

As already mentioned in that other thread of yours by @GreenSock and @Cassie, the order of creation of your ScrollTriggers is very important.

 

If you create the ScrollTrigger on your .triggerClick before all the other ScrollTriggers, it can not know about the pinSpacing that is being added by the other ScrollTriggers you are creating later on - although they affect elements that are prior to the .triggerClick in their appearance in the DOM.

 

See the Pen 0130dd24ddea70c666830307c8d388da by akapowl (@akapowl) on CodePen

 

 

 

As already mentioned, too; if for whatever reason you can't create them in order of appearance on the page, you can set a refreshPriority.

 

More info on that here: 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort()

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

@akapowl Yes, I remember and in my local React practice environment I did exactly in that order what you mentioned before, but didn't work.

 

I found the issue, hopefully it will be useful for others who tries to use it in React. Right now I have a main page, and a single component: (<Gsap_1 />)

If I put the animations in the components, then the order how they load is different than what you see in the code. I put every single animation into index.js file, and it's perfect.

At the and my goal is to implement every single examples on the website into a react components, but I'm afraid it will be a mess if I add everything into index.js.

 

Thank you again for your help, it made me think and that's why I found out this react issue.

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.
×