onLeave triggers faster than expected

[GiGiX]

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

[akapowl]

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()

[GiGiX]

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