bruno3du Posted July 13, 2022 Share Posted July 13, 2022 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 https://codesandbox.io/s/portfolio-app-forked-20tos8?file=/components/projects.js Link to comment Share on other sites More sharing options...
GreenSock Posted July 13, 2022 Share Posted July 13, 2022 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: https://codesandbox.io/s/portfolio-app-forked-tznwde?file=/components/projects.js Does that help? Link to comment Share on other sites More sharing options...
bruno3du Posted July 13, 2022 Author Share Posted July 13, 2022 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 More sharing options...
GreenSock Posted July 13, 2022 Share Posted July 13, 2022 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. 1 Link to comment Share on other sites More sharing options...
bruno3du Posted July 13, 2022 Author Share Posted July 13, 2022 it worked, love you Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now