Rabeegsap Posted July 16, 2022 Share Posted July 16, 2022 Hi, I used to set the CSS for the elements then use gsap.from to animate them from a position A to their default position in the CSS. using margin for relative elements and left or right for absolute ones. Now gsap.from is not animating elements properly Please help, See the Pen MWVJbXJ by rabeexxxx (@rabeexxxx) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted July 16, 2022 Share Posted July 16, 2022 Hi @Rabeegsap welcome to the forum! I removed the React logic around your GSAP code and as you can see the code you've written works perfectly when animating the H1. As a general rule I would stay away from animating `margin` or `left`/`right`, it is better to animate `x` and `y`, these are more performant See the Pen ZExLKBO?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen There is probably something missing in your local setup. I recommend taking a look at the React setup Greensock as created on CodeSandbox to check how to set it up and if you still have an issue share a Codesandbox with your not working code. 2 Link to comment Share on other sites More sharing options...
Cassie Posted July 16, 2022 Share Posted July 16, 2022 Using React See the Pen MWVJbXJ?editors=1010 by rabeexxxx (@rabeexxxx) on CodePen Getting started article here - And a solution for an issue with from tweens if you're using react 18 and strict mode. It doesn't look like that's your issue here though! Good luck! Link to comment Share on other sites More sharing options...
GreenSock Posted July 16, 2022 Share Posted July 16, 2022 Here's a demo illustrating the React 18 double-call-in-strict-mode issue: See the Pen abYBGEZ?editors=0010 by GreenSock (@GreenSock) on CodePen And here is a solution: See the Pen QWmdvzN?editors=0010 by GreenSock (@GreenSock) on CodePen There's another [even better] solution coming in the next release of GSAP. Stand by for that 1 Link to comment Share on other sites More sharing options...
Rabeegsap Posted July 17, 2022 Author Share Posted July 17, 2022 12 hours ago, mvaneijgen said: Hi @Rabeegsap welcome to the forum! I removed the React logic around your GSAP code and as you can see the code you've written works perfectly when animating the H1. As a general rule I would stay away from animating `margin` or `left`/`right`, it is better to animate `x` and `y`, these are more performant There is probably something missing in your local setup. I recommend taking a look at the React setup Greensock as created on CodeSandbox to check how to set it up and if you still have an issue share a Codesandbox with your not working code. Actually, I just created a react app then npm i gsap , I am not sure what is going on its just a simple code. Link to comment Share on other sites More sharing options...
Rabeegsap Posted July 17, 2022 Author Share Posted July 17, 2022 11 minutes ago, Rabeegsap said: Actually, I just created a react app then npm i gsap , I am not sure what is going on its just a simple code. gsap.to works fine, my issue with gsap.from If I call gsap.from using a button, it works fine but if it is inside useEffect then it will not work this code below not working: useEffect(() => { gsap.from(".h1", { x: -2500,duration:1 }); }); this one works fine: function App() { const clicked = () => { gsap.from(".h1", { x: -2500,duration:1 }); }; useEffect(() => { }); return ( <div className="App"> <h1 className="h1">Hello</h1> <h1 className="x500">X=500</h1> <button className="btn" onClick={() => clicked()}> click me </button> </div> ); } Link to comment Share on other sites More sharing options...
Cassie Posted July 17, 2022 Share Posted July 17, 2022 Hi there - Please give the thread a proper glance over! There were two solutions provided. one in the thread I linked to - useLayoutEffect(() => { let from = gsap.from(elem0.current, { rotation: 360, immediateRender: false }); return () => { from.kill(); }; }); And another from Jack - Quote And here is a solution: See the Pen QWmdvzN?editors=0010 by GreenSock (@GreenSock) on CodePen Along with a thread explaining why... And a demo showing the issue - Quote Here's a demo illustrating the React 18 double-call-in-strict-mode issue: See the Pen abYBGEZ?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 17, 2022 Share Posted July 17, 2022 The reason you didn't immediately get help for the react issue is that the demo you provided wasn't actually a working demo. The HTML was being drawn from the HTML panel, not being injected by React and your React code wasn't actually running at all. Here - I deleted the markup from your demo to demonstrate See the Pen jOzyZvq by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 17, 2022 Share Posted July 17, 2022 As Jack said too - there's a new (better) fix coming in the next version. 🥳 Apologies for the speedbump. The React double call behaviour's tripped up a lot of people. It's quite a frustrating one! 1 Link to comment Share on other sites More sharing options...
Rabeegsap Posted July 17, 2022 Author Share Posted July 17, 2022 Thanks for the help 1 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