RWD bug?

[Sean Coding 0 Likes (Newbie)]

What's up guys,

i'm really new to React and been using GSAP for couple times in vanilla JS, I can't really understand this bug, it has miscalulation under maybe 1024px(1024px is normal presented), and it's ok again in size 360px. is this a bug or i am using it wrong in react framework?

Also, it has different miscalculation in different sizes, such as 375, 414.

 

Appreciate your time for my practice :)

Github

See the Pen by wedding (@wedding) on CodePen

[GSAP Helper 89 Likes (Contributor)]

Welcome to the forums, @Sean Coding.

 

It's definitely not ideal to try to troubleshoot via a Github link like that - you'll have a much better chance of getting a solid answer here if you provide a CodePen or CodeSandbox or Stackblitz. Here's a React starter template that you can fork. 

 

One thing I noticed was that it looks like you're not doing proper cleanup which is pretty important in React. React 18 actually double-invokes useEffect()/useLayoutEffect() which means you might inadvertently be creating duplicate/competing animations/observers. I'd definitely recommend reading this article:

 

gsap.context() is your new best friend in React because it makes cleanup so simple (plus the scoped selectors can be super convenient). 

 

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

 

I'd recommend wrapping your stuff properly in a gsap.context() and do proper cleanup, and then if you're still having trouble, post a Stackblitz that clearly shows the issue and we'd be happy to take a peek.