Jump to content


Bug when using gsap with svg - Next.js, Chakra, GSAP, SVG

Recommended Posts

Hi there!


I have an issue using gsap. 


I'm using chakra and next on my project and i dont know why, but when I put the gsap to work it just make my svg weird, It look to overwrite something that should not happen.


If you look at this little example and comment the line of useEffect you'll see what I mean.


Hopeful for help, thanks



Link to comment
Share on other sites

You had some errors that caused your project not to even compile (bad imports). Once I commented those out, I couldn't figure out what you were trying to do with your animation - it looks like you set the end to be "center center" but the trigger is 100vh and starts out at the top, thus its center is already in the center of the viewport. So it wouldn't do anything. 


I adjusted the start and end to show it actually doing something below. Be careful about using .from() tweens in React because in strict mode, React calls the useEffect() TWICE which of course would ruin the .from() logic. It'd use the CURRENT value as the destination, and immediately render the value in your tween as the start...so if you suddenly create another .from() at that point, the first one would have rendered it, thus that'd be used as the "current" one, thus the start and end would match (no tween). Not a GSAP problem - it's a logic issue caused by React double-calling useEffect(). So I changed it to a .fromTo() to protect against that:




Does that help? 

Link to comment
Share on other sites

Nice, but the thing is that svg is being black on use gsap, it should not be like that, if you remove gsap for a while it will be okay, and i dont have a clue why, i just know that it is happening by using gsap, that's why i said to commend gsap. thanks for the tip though

Link to comment
Share on other sites

Oh, that's a CSS issue. It's totally unrelated to GSAP. If you apply a transform to the element, I believe the browser creates a new stacking context and it can interfere with the child mix-blend-mode values. So maybe just set mix-blend-mode: screen on that element. 

  • Like 1
Link to comment
Share on other sites

it worked, love you 

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.