When using React, should I use...

[JasonD]

react-gsap?

 

or just the import gsap into the project ? (npm gsap)

 

What are the benefits of one vs the other?

[ZachSaucier]

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?

[JasonD]

hey, that works for me, thanks!

[OSUblake]

react gsap allows you to create animations in JSX.

 

const TweenComponent = () => (
  <Tween from={{ x: '100px', rotation: -360 }}>
    <div>This element gets tweened</div>
  </Tween>
);

 

 

[JasonD]

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?

[ZachSaucier]

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.

[JasonD]

weird, I thought my code said if TRUE play, else Reverse.

[OSUblake]

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

 

[OSUblake]

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.

[JasonD]

Thanks I get it, but it should be easier than this.    Thanks for the cleanup and explanation.  

[Rodrigo]

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.