ScrollTrigger pin breaks when upgrading to 3.11.3 or higher

[PatrickZimmermann]

Recently I updated gsap from 3.11.0 to the latest, but every version past 3.11.3 breaks a pinned scrolltrigger that I have.

 

When I try to pin something, it jumps to the end and pins from that end potition instead of the top of the page (start: "top top")

https://codesandbox.io/s/gsap-pin-issue-by1qf9

[Cassie]

Hey there Patrick!

 

So I can't really speak in detail on why your demo in 3.11.0 is working. There was a regression related to from tweens which was *fixed* in 3.11.3 - so maybe this is just an edge case that was working but shouldn't have worked?

It does look like a React integration related issue though, likely to do with strict mode - I popped it into codepen using 3.11.4 and without React it's working fine.

See the Pen vYzVwYe?editors=1111 by GreenSock (@GreenSock) on CodePen.

 

That being said - There are a few issues in your setup which I've adjusted here for you -

 

The main one being - React 18's strict mode behaviour calls for proper cleanup of animations as all effects will be run twice. We added context to help with this

 

some others -

• UseLayoutEffect is preferable to useEffect when doing DOM calculations as it runs after the DOM is finished loading
• Context also lets you scope selector text easily!
• You're using a fromTo tween on a timeline, but the 'from' section is empty, there's a scrub but no animation being scrubbed and there are no more tweens on the tl? Is there a reason for this? Seems like it would make more sense to just use ScrollTrigger.create() for a pin here. Maybe you've just simplified down an animation to demo? If so ignore me!

 

https://codesandbox.io/s/gsap-pin-issue-forked-2ejglr?file=/src/App.js

I hope this helps.

[PatrickZimmermann]

Thank you, I was able to get it working by using gsap.context() and revert()!