I just joined the GSAP community and have some questions about using it with react!

[Alixsep]

Hello!
I am a react dev, and always wanted those flashy animations I often see on various places on internet!

I joined the GSAP community because I found that this is the best animating lib, on the market hands down.

 

although there are few stuff that are not clear to me:

A ) GSAP uses actual DOM for animating while react uses virtual DOM. so the docs suggest to use Ref's but there is no detailed and up-to-date tutorial on how to do it the clean way.
this is the best article I could find: (which is Greensock's promoted link)

https://edidiongasikpo.com/using-gsap-scrolltrigger-plugin-in-react
- Why is there many useEffects in that tutorial? and not one?
- What will happen if an element gets re-rendered? will the animation break? will it restart? will it go with no-problem but looses the efficiency? What if an state change? I have no clue...
- What if I have nested components? should I put each tween in each component's own useEffect? or should I put all of them in the parent and single useEffect? Should I register the plugins in each component or in parent only?

- What is the issue with the useLayoutEffect? Can't I use it? no tutorial used it. (I have some components that if I use useEffect I will end up seeing super short flashy glitches, so I use useLayoutEffect)

B ) For mounting/unmounting, can't I just use the GSAP? Why the hell does the docs suggest react-transition-group ??? I hate that library, always full of bugs and glitches and inconsistencies.

 

These are the question I have for now! I will be really thankful for the people who reply,
Love y'all,
Alixsep

[GreenSock]

Welcome to the forums, @Alixsep! Very happy to hear that you're enjoying GSAP 🎉

 

I'm not a React guy, so I can't really address your question with any kind of authority. Perhaps @Rodrigo or @OSUblake may have some insight. 

 

I do know that a lot of people use GSAP in React, so it's very doable. 

 

That article you linked to - I have no idea why they'd use a bunch of useEffect() calls instead of one. Seems like it's overcomplicating things. I'd do just one, but again, I'm not a React guy so maybe there's a good reason they did it that way. 

 

Where in the docs do you see a recommendation to use react-transition-group? As far as I know, the docs don't have any React-specific code but I may be forgetting something. 

[Alixsep]

2 hours ago, GreenSock said:

Welcome to the forums, @Alixsep! Very happy to hear that you're enjoying GSAP 🎉

 

I'm not a React guy, so I can't really address your question with any kind of authority. Perhaps @Rodrigo or @OSUblake may have some insight. 

 

I do know that a lot of people use GSAP in React, so it's very doable. 

 

That article you linked to - I have no idea why they'd use a bunch of useEffect() calls instead of one. Seems like it's overcomplicating things. I'd do just one, but again, I'm not a React guy so maybe there's a good reason they did it that way. 

 

Where in the docs do you see a recommendation to use react-transition-group? As far as I know, the docs don't have any React-specific code but I may be forgetting something. 

Hey there! thanks so much for the greeting 🥳💖

you tagged rodrigo and osublake, should I direct message them or will they see this topic and reply?

 

and ye, this is the part where GSAP recommends the react-transition-group library: 

(Scroll through it)

 

I should mention that the codes is that link above ... are extremely outdated! As react docs suggest, we should use functional components against the class based components, but the GSAP docs used class based react code all the way up.

 

 

[GreenSock]

Yeah, that article is from 2018 and there are some clear warnings at the top about it being outdated . That's not the "docs" for sure - it's more like a guest blog post from 2018. 

 

You don't need to private message @Rodrigo or @OSUblake. They'll see this I'm sure - it's just that it's the weekend and they're also VERY busy people with other projects they're juggling, so it may take a little time for them to chime in. Thanks for your patience. 

 

There are some other people here in the forums with React expertise as well - perhaps they'll swing by. Anyone is welcome to post their input, of course. 

[Rodrigo]

Hi,

 

The virtual DOM React uses it's something that a developer hardly will access at any given point in an app development. I haven't seen a single case of that. For more info read this: https://reactjs.org/docs/faq-internals.html

 

The usage of refs is not something we came up with here in the GSAP forums, it's the way React allows developers to access the DOM elements rendered in a specific component, nothing more. The samples, again, are pretty clear in the React documentation, you can use the useRef() hook as mentioned here: https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components. You can also use a ref callback in functional components, but always using the useRef() hook as the container of the reference:

const myRef = useRef();

const createRef = (element) => {
  myRef.current = element;
};

return (
  <div ref={createRef}>
  </div>
);

This is also handy if you're using an array.map() helper and want to store multiple refs in an array:

const myArray = [/* Array Elements */];

const Component = () => {
  const myRefs = useRefs([]); // by default an empty array
  
  const createRef = (element, index) => {
    myRefs.current[index] = element;
  };
  
  return (
    <ul>
      {myArray.map((el, index) => {
        <li key={`myEl-${index}`} ref={() => createRef(el, index)}>
        </li>
      })}
    </ul>
  );
};

 

On 4/24/2021 at 5:56 AM, Alixsep said:

Why is there many useEffects in that tutorial? and not one?

That depends on the app being build. The amount of useEffect hooks in a component should go in hand with the properties in the state and/or props being passed to the component, that are being updated. You should be able to infer that from the app's context. Not the context API, but what is actually happening in the app, what is being updated and why is important to keep track of that.

 

On 4/24/2021 at 5:56 AM, Alixsep said:

- What will happen if an element gets re-rendered? will the animation break? will it restart? will it go with no-problem but looses the efficiency? What if an state change? I have no clue...

Normally the best approach is to store your GSAP instances in a useRef hook in order to keep them through re-renders and make it easier to kill them when the component is unmounted. In case of a re-render the animation should continue without any issues. Keep in mind that React only replaces the part of the DOM that has to be replaced in a re-render, otherwise it would be extremely expensive and inefficient. If the DOM node being updated in a re-render is actually being animated when the component's state or props are updated, the updated element would be rendered in the position given by the original styles and the GSAP instance would not break, because GSAP will keep a reference to the DOM element's object  and will keep updating it. In this cases the best approach is to use an useEffect hook to kill the animation and create a new one with the re-rendered element, but this is a rare scenario.

 

On 4/24/2021 at 5:56 AM, Alixsep said:

- What if I have nested components? should I put each tween in each component's own useEffect? or should I put all of them in the parent and single useEffect? Should I register the plugins in each component or in parent only?

This depends on how you plan to control the animations. If you need to control the animation of a child component in a parent one, use forwarding refs: https://reactjs.org/docs/forwarding-refs.html, otherwise keep the GSAP instances in the component where they happen, it makes more sense.

 

On 4/24/2021 at 5:56 AM, Alixsep said:

- What is the issue with the useLayoutEffect? Can't I use it? no tutorial used it. (I have some components that if I use useEffect I will end up seeing super short flashy glitches, so I use useLayoutEffect)

Yeah, that depends on the implementation of your app. If layout effect solves the issue then is a good idea to use it. So what's the issue you mention with the layout effect hook? If you're already implementing it, I don't understand the premise of your question.

 

On 4/24/2021 at 5:56 AM, Alixsep said:

B ) For mounting/unmounting, can't I just use the GSAP? Why the hell does the docs suggest react-transition-group ??? I hate that library, always full of bugs and glitches and inconsistencies.

Mhhh... how exactly can you use GSAP for mounting or unmounting components? GSAP works with DOM nodes by updating some properties in a specific amount of time or frames (when you use frames). It has no control on when a React component is mounted/unmounted. Why we suggest transition group? Because transition group, as well as Vue's <transition> component are based on Angular's ng-animate, which is an excellent way to control animations in components. Transition group actually handles the mount/unmount process in a way that allows to create animations for that process and, while it certainly has a few open issues in github, is currently actively maintained by the React team and many very talented developers. Finally I've used transition group in production, in many projects without any issues and I've seen in it used in plenty of projects that are highly praised and without bugs or glitches as you mention. If you're running into a particular issue, perhaps you could provide a reduced live sample in codesandbox to take a look and also report such bugs to the React team: https://github.com/reactjs/react-transition-group/issues

 

20 hours ago, Alixsep said:

I should mention that the codes is that link above ... are extremely outdated! As react docs suggest, we should use functional components against the class based components, but the GSAP docs used class based react code all the way up.

Yep, indeed that is quite outdated and I haven't had time to update this guide. While React suggest to use the functional approach, there is no real issue in using classes, in fact React Router, not exactly a shady library, uses classes: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Router.js. Also plenty of other libraries that work without any issues on top of React, still use class based components. There is actually no hard evidence that functional components are better than class based components. You could argue that the code is better organized or something like that, but I've seen apps that are a mess in both approaches. The fact that the React team favors the use of functional programming over class programming is just a preference and nothing more. In fact GSAP uses classes and I think it works pretty good right?

https://github.com/greensock/GSAP/blob/master/src/gsap-core.js#L1133

 

Happy Tweening!!!

[Alixsep]

Hi, thank you for the rich reply!
 

On 4/26/2021 at 9:57 AM, Rodrigo said:

always using the useRef() hook as the container of the reference

alright i get you!

 

On 4/26/2021 at 9:57 AM, Rodrigo said:

want to store multiple refs in an array

yes but this is the warning that was written at : (look at the end of the article)

 

Quote

• In the second sample I see this code in the ref callback ref={div => this.cards = div}. Why is the index being used instead of just pushing the element in the array?
  The reason for that is that every time a React component is re-rendered, the render method is executed, but the original instance remains unchanged. The array used to create the animation is created in the component's constructor. The GSAP animation (a TimelineLite) is created in the componentDidMount hook. These two elements are created just once in the App's lifecycle, while the render method is executed on every re-render. Therefore if we push the elements to the array on every re-render, even though the Timeline instance won't change, the array will get bigger and bigger every time the component is re-rendered. This could cause a memory issue, especially for large collections.

i will be happy if you explain what is going on with refs in array and gsap.
 

On 4/26/2021 at 9:57 AM, Rodrigo said:

That depends on the app being build.

Uhh, as i asked ... why is there so many useEffects in that tutorial?????? none of them has a dependency for useEffect :( 
 

On 4/26/2021 at 9:57 AM, Rodrigo said:

If you need to control the animation of a child component in a parent one, use forwarding refs

Thanks so much. got you!

 

On 4/26/2021 at 9:57 AM, Rodrigo said:

Finally I've used transition group in production, in many projects without any issues and I've seen in it used in plenty of projects that are highly praised and without bugs or glitches as you mention

Last time i checked it was last year. i guess i have to re-try it and give it another chance!

 

On 4/26/2021 at 9:57 AM, Rodrigo said:

There is actually no hard evidence that functional components are better than class based components. You could argue that the code is better organized or something like that, but I've seen apps that are a mess in both approaches.

although you are correct but i am so tired of seeing "this" keyword everywhere. also using functions will hugely decrease the mess in source code. its way cleaner...

ANYWAYS
Thanks so much again for the detailed reply. holy s*** you typed all that for me ❤️ 

[OSUblake]

2 hours ago, Alixsep said:

i will be happy if you explain what is going on with refs in array and gsap.

 

What are you trying to figure out? If you want to animate an list of elements, gsap needs an array or a nodelist.

gsap.to([element1, element2, element3], {
  x: 100
});

 

Push will just keep adding to that list, so you end up with something like this.

gsap.to([element1, element2, element3, element1, element2, element3,element1, element2, element3], {
  x: 100
});

 

2 hours ago, Alixsep said:

Uhh, as i asked ... why is there so many useEffects in that tutorial?????? none of them has a dependency for useEffect :( 

 

You can ask the author. It's not necessary. Maybe they did it for clarity. 🤷‍♂️