Jump to content

Sean Coding

RWD bug?

Go to solution Solved by GSAP Helper,

Recommended Posts

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 :)


See the Pen by wedding (@wedding) on CodePen

Link to comment
Share on other sites

  • Solution

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. 

  • Like 2
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.