Jump to content
Search Community

GSAP ScrollTrigger - Container div moving on entry trigger

jknott test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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,
      },
    });

 

Link to comment
Share on other sites

  • Solution

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. 

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