Jump to content
Search Community

GSAP Markers weird behaviour

KeithMartell test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi all! New to TriggerScroll/GSAP here. I'm facing a weird behaviour with the same exact code on codepen vs my local react app.

Basically  what I am trying to achieve is a simple rotation of the image when the parent  div containing the image comes into viewport. To note, the parent div is part of a list of "divs" which is on one big "position: absolute" div which is on top (z-index: 2) of a "base" div (acting like a background). 

I seem to be able to achieve this effect on codepen, but for some reason on my react app, the start and end markers are pushed all the way to the top of the screen. But if I make changes on the file and hot-reload, the marker jumps to the correct position. But if I were to do a refresh on the browser (instead of hot-reloading), the trigger markers load on the top of the div by default.

I've tried both CDN and npm method for installing, I cannot figure out why this is happening :( Did I mess up some order of js bundle loading or something like that?

Cheers in advance

image.png

image.png

See the Pen OJwrdbM by Keith-Eng (@Keith-Eng) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums, @KeithMartell.

 

Whenever I hear about something working fine in CodePen but not locally, and it's React, that's an immediate clue that you're probably getting bitten by the React 18 "double-useEffect() invoke" behavior. It's a React thing. And I bet you're not doing proper cleanup to make sure you're not accidentally creating multiple conflicting/duplicate ScrollTriggers/animations. 

 

I'd strongly recommend reading this article:

 

 

gsap.context() is your new best friend in React :) It makes cleanup so simple. 

 

useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // put all your GSAP/ScrollTrigger code inside here!
  });
  
  return () => ctx.revert(); // <-- cleanup!
}, []);

 

If you're still having trouble, just fork this Stackblitz React starter template and try to recreate the problem: 

https://stackblitz.com/edit/react-cxv92j?file=src%2FApp.js

  • Like 1
Link to comment
Share on other sites

3 minutes ago, KeithMartell said:

Still a little confused as to whats happening and why and why is that the fix

Basically React calls useEffect()/useLayoutEffect() TWICE in strict mode. Super annoying because that ends up creating duplicate (competing) animations/ScrollTriggers. That's why it's so important to do proper cleanup (killing/reverting the old ones before creating new ones). 

 

Glad to hear it's working now for you! Enjoy the tools. 💚

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