Is it possible to animate in React without using ref?

[Romanus]

I have a question. Can I animate elements in React using ".elementClassName" class and not ref?

Modifying the DOM is considered bad practice, but I haven't noticed any problems. What do you think about it?

I'm much more comfortable using classes, but I don't know if that's the right thing to do

[Rodrigo]

Hi,

 

There is a big difference between modifying the DOM using JS in a React setup and selecting an element that is already present in the DOM using a text selector.

 

If you are certain that the element with the selector you're passing is going to be in the DOM when you use such selector, then it shouldn't be a problem, regardless if it's considered an anti-pattern, bad-practice or whatever.

 

My two cents on the subject is that developers should be aware of the elements that are rendered in the DOM when working with frameworks like Vue, Svelte, Angular, React, etc. If you're not sure if the elements you'll be looking for at a given time are going to be there, then IMHO your app has a structural or architectural flaw. Flipping coins when it comes to rendering the DOM in an app is a bad bet and most likely will come back to haunt you at some point. Finally I think that some people that promote the use of React have gone too far in spreading this type of information. I've worked in React projects for years and yet have to find a breaking error when using text selectors. This is pretty much like peeling a potato with an extremely sharp knife, if you're careful you'll get a nicely peeled potato ready to be cooked without cutting yourself, you don't have to be afraid of using the knife  

 

Happy Tweening!

[GreenSock]

In the vast majority of cases, you can absolutely use class names for GSAP-related stuff - that's precisely what the "scope" parameter is for in gsap.context(). If you're using React, trust me, gsap.context() is your new best friend. It makes cleanup super easy too. See this article: 

 

So basically...

let root = useRef();

useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    
    gsap.to(".my-class", {...});
  	// all your GSA-related code in here...
                          
  }, root); // <-- SCOPE!!!
  
  return () => ctx.revert(); // cleanup
}, []);

return (
  <div ref={root}>
    <div className="my-class"></div>
  </div>
</div>
);

You only have to use a ref for the root. Then use that for the scope, and then all your selector text inside the gsap.context() will only get descendants of that element. 

 

Have fun!

[Cassie]

I appreciate the potato analogy @Rodrigo

[Kenny Timber]

Yes, you can animate elements in React using the .elementClassName class. However, directly modifying the DOM in React is typically seen as bad practice. Instead, you should access the DOM element with a ref and then animate it using the React animation API.

Directly altering the DOM is frowned upon in the programming language for a number of reasons. Your code may become less reusable in the beginning. The code that alters the DOM must be repeated if you need to animate the same element more than once. Second, it can reduce the performance of your code. Directly altering the DOM can sometimes be less effective, but React's animation API is optimized for efficiency.

Edited June 9 by GreenSock
Removed external link that looked suspicious

[GreenSock]

@Kenny Timber can you provide an example that shows "React's animation API" performing better than GSAP? And what exactly do you mean by "React's animation API"? 

 

I'm definitely not a React guy so I could be wrong, but my understanding is that it's a common misperception that you're not supposed to ever animate the DOM directly. That's what GSAP does, of course. And going through React to do that would actually make it much slower. People seem to think that React is super fast and one must always do things through React but I think that may be incorrect, at least in many cases.