Problem with ScrollTrigger Pinning - pin jumps to end of trigger

[The_Orange_Dot]

Hi, I'm somewhat new here and I'm currently having problems with the ScrollTrigger plugin's pin function. For some reason, when the trigger is fired, thing I'm trying to pin to the top of the screen jumps down to the end of the scroll trigger. But when I scroll back up, the pin would work somewhat fine. I started a new project to test it out on Nextjs and it still jumps, but when i had this in codepen it worked flawlessly. I've added a screenshot of the code (with inline styling so you can see it all on one screenshot) and video link below. 

 

Thanks in advanced!

 

Here's a link to the problem on youtube:

 

 

 

 

See the Pen KKBNVqK by the-orange-dot (@the-orange-dot) on CodePen

[Rodrigo]

Hi @The_Orange_Dot and welcome to the GreenSock forums!

 

This most likely is related with React's strict mode. When using GSAP in a React app (or it's ecosystem such as NextJS and Gatsby for example) we strongly recommend using GSAP Context:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Here is a setup using React with the same markup you have and you can see it works OK:

https://stackblitz.com/edit/react-d1gu6j?file=src%2Fstyle.css,src%2FApp.js

 

Also take a look at this guide:

Finally you can see these collections in order to see how to get started with GSAP in a React App:

 

React

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

NextJS

https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters

 

Let us know if you have more questions.

 

Happy Tweening!

[GreenSock]

Just to be clear, the problem is most likely caused by the fact that your useEffect() is getting called MULTIPLE times (React 18+ started doing that), so you're creating duplicate ScrollTriggers that are fighting with each other for control of the same element(s). You're not doing proper cleanup to revert/kill the old ones before creating the new ones. The gsap.context() method makes cleanup super easy. I bet once you use that, your problem will go away. 

[The_Orange_Dot]

Yup! that did the trick! thank you so much