Jump to content
Search Community

ScrollTrigger pin breaks when upgrading to 3.11.3 or higher

PatrickZimmermann test
Moderator Tag

Recommended Posts

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.

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