Updating start/end positions when initializing pin.

[De.Minov]

There are two components:
The first component uses pin, where the pin-spacing height equals the height of this element +=200%.
The second component uses start for its trigger and gsap.from animation.

When initializing the pin from the first component, it is given a new height, but the start/end positions of the second component are unaware of this, causing them to execute earlier.

This is the main issue, and I couldn't find the correct solution to fix it.

I created a minimal example, but for some reason, it doesn't work there 🤔

See the Pen eYxeVMK by de-minov (@de-minov) on CodePen

[mvaneijgen]

If the codepen has no issue, it will be hard to debug what is going wrong. 

 

The only thing I can think of is in what order will your ScrollTriggers be created? If that is the issue you can set refreshPriority (just keep a counter an increment it each time a ScrollTrigger is created and set that as the number). From the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/

Quote

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

[De.Minov]

13 часов назад, mvaneijgen сказал:

Если в коде нет проблем, будет сложно отладить, что происходит не так. 

 

Главное, о чем я могу думать, в каком порядке будут создаваться ваши ScrollTriggers? Если это проблема, вы можете установить updatePriority (просто сохраните счетчик, увеличивая его каждый раз, когда создается ScrollTrigger, и установите его как число). Из документации  https://gsap.com/docs/v3/Plugins/ScrollTrigger/.

 

Unfortunately, this doesn't help.

 

It feels like the first component takes more time for calculations, and when it's done, the second component is already working.

[GreenSock]

14 hours ago, De.Minov said:

I created a minimal example, but for some reason, it doesn't work there 🤔

You mean it DOES work there? I'm having a hard time understanding your question. Do you have a minimal demo that very clearly illustrates the issue? Are you using the latest version of GSAP? 

 

I noticed you have a ref problem - you create a sectionRef and never assign it, but then use that as the scope in your gsap.context() which isn't valid. 

 

Here's a fork that uses a brand new (unannounced) @gsap/react package that exposes a useGSAP() hook, making it simpler to work in react: 

See the Pen oNmpXoV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

And I fixed that ref issue too. Does that help at all? 

[De.Minov]

I found the cause of all the issues... 🥲

 

The whole problem was that I had a useBreakpoint() hook, which was a dependency for useLayoutEffect() in the first component, but it was missing in the second one, which caused this problem.

 

What a carelessness 🤦‍♂️

 

----

 

Thank you all so much for your help! 🙏
The topic can be closed now.

[GreenSock]

Thanks for letting us know you figured it out! 👍