JasonD Posted March 4, 2020 Share Posted March 4, 2020 react-gsap? or just the import gsap into the project ? (npm gsap) What are the benefits of one vs the other? Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 4, 2020 Share Posted March 4, 2020 In my limited experience working with React and GSAP, I've never needed react-gsap. I don't know much about it or the differences. It looks like it was last updated/published over a year ago so that means it doesn't use GSAP 3. The fact that it's not maintained is another reason not to use it Maybe @OSUblake, @Rodrigo or @elegantseagulls can provide additional insight? Link to comment Share on other sites More sharing options...
JasonD Posted March 4, 2020 Author Share Posted March 4, 2020 hey, that works for me, thanks! Link to comment Share on other sites More sharing options...
OSUblake Posted March 4, 2020 Share Posted March 4, 2020 react gsap allows you to create animations in JSX. const TweenComponent = () => ( <Tween from={{ x: '100px', rotation: -360 }}> <div>This element gets tweened</div> </Tween> ); 2 Link to comment Share on other sites More sharing options...
JasonD Posted March 4, 2020 Author Share Posted March 4, 2020 Bananas! having a tough time with something simple. I 'JUST WANT TO REVERSE THE MENU'. https://codesandbox.io/s/great-dream-vt4wb I feel like line 25 should do all the heavy lifting. What am I missing here? Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 4, 2020 Share Posted March 4, 2020 11 minutes ago, BrownsFanForLife said: having a tough time with something simple. I 'JUST WANT TO REVERSE THE MENU'. https://codesandbox.io/s/great-dream-vt4wb I feel like line 25 should do all the heavy lifting. What am I missing here? Your code is equivalent to: if(showslideMenu) { slideMenu.play() } else { slideMenu.reverse(); } Does that show you why it doesn't work? You should probably be checking the timeline's .reverse() state instead. Link to comment Share on other sites More sharing options...
JasonD Posted March 4, 2020 Author Share Posted March 4, 2020 weird, I thought my code said if TRUE play, else Reverse. Link to comment Share on other sites More sharing options...
OSUblake Posted March 4, 2020 Share Posted March 4, 2020 The joys of using hooks 🙄 You can't use regular variables as everything gets wiped out on every render. And notice the empty array in the first useEffect. https://codesandbox.io/s/dreamy-kare-iyvfp 3 Link to comment Share on other sites More sharing options...
OSUblake Posted March 4, 2020 Share Posted March 4, 2020 10 minutes ago, BrownsFanForLife said: weird, I thought my code said if TRUE play, else Reverse. It does, but it can't play or reverse the timeline because you lost the reference to it. Link to comment Share on other sites More sharing options...
JasonD Posted March 4, 2020 Author Share Posted March 4, 2020 Thanks I get it, but it should be easier than this. Thanks for the cleanup and explanation. Link to comment Share on other sites More sharing options...
Rodrigo Posted March 4, 2020 Share Posted March 4, 2020 1 hour ago, OSUblake said: The joys of using hooks Indeed, I'd like to know the opinion of those that condemn classes and OOP in JS after seeing that and how simple it is to do it with a class component: https://stackblitz.com/edit/gsap-react-simple-tween?file=simple-tween.js No useEffect, state management or any other weird stuff, just a property and a simple event handler. What's the performance difference? tiny if any... Recommendation: keep using classes when possible (some project managers are fixated on hooks though). I worked on a few projects last year and both used class components and even further plain JS classes instead of Object constructors for some repetitive elements. Don't believe in everything you read regarding classes vs hooks. 5 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