GSAP ScrollTrigger - Container div moving on entry trigger

[jknott 12 Likes (Newbie)]

Screen recording of the issue i'm referring to:
https://www.dropbox.com/s/nh2f5gm67xhanpa/Screen Recording 2023-02-10 at 1.26.47 PM.mov?dl=0

Background: 
I have a remix / react application and i'm trying to get scrolltrigger to pin a container element.  I've read through other posts, but can't seem to figure this out.  You can see I set the end to be 900px, this appears to move the entire div down 900px on trigger entry.  You can see when I scroll back up and it's triggered through the "end" marker it works as intended - but for some reason the entry marker makes everything shift.  Any ideas?

I've tried removing elements and simplifying to see if any parent container or div was the problem and it doesn't seem to be the issue.

 

useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: '#everybodyWins',
        start: 'top 20%',
        scrub: 1,
        pin: true,
        end: '+=900',
        markers: true,
      },
    });

 

[GreenSock 18,894 Likes (Superhero)]

Hi @jknott. It's pretty tough to troubleshoot without a minimal demo, but I noticed you're not doing proper cleanup in your useEffect() so I bet you're getting bitten by React 18's double-invoke of useEffect() which is causing you to create multiple/duplicate/conflicting animations/ScrollTriggers.

 

gsap.context() is your new best friend in React. It makes cleanup super easy. Plus the selector scoping is very convenient. I'd highly recommend reading this article: 

 

 

Example tweak of your code: 

gsap.registerPlugin(ScrollTrigger);

useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // put all your GSAP/ScrollTrigger code inside here...
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: '#everybodyWins',
        start: 'top 20%',
        scrub: 1,
        pin: true,
        end: '+=900',
        markers: true,
      },
    });
  });
  
  return () => ctx.revert(); // <-- CLEANUP!
}, []);
    

If you still need some help, please make sure you provide a minimal demo. Here's a React starter template you can fork. 

[jknott 12 Likes (Newbie)]

This totally fixed my issue!! Thank you!!