在 React.js/Gatsby.js 中使用 gsap 为动画定位类名是一种好习惯吗？

Question

I have read the gsap docs for react integration, and it recommends using useRef() s to target elements to animate, like so:

const ref = useRef()
gsap.to(ref, {...})

however, this is very inflexible because the ref is limited to the component's file. in gsap you tend to target multiple elements from all around the website like with gsap.timeline() , so it becomes nearly impossible to target multiple refs from multiple components without complex logic like using context api.

so im wondering if using the old fashioned way of targeting elements with class names in react is the right approach?

like so inside a useEffect :

gsap.from('.foo', {...})

because using class names seem to be dealing with direct dom manipulation, and that seem to be bad practice.

can anyone chime in on this?

Answer 1

In general you should avoid using generic selector strings (what you're doing) as the target of tweens in React. Part of the reason why you want to do so is because it's not very reactful and doesn't keep the components strictly to themselves. Second, the window reference may not always exist so it would throw warnings (or errors depending on your code) in some circumstances.

Try to stick to using refs and optionally use selectors from that ref. Doing so kind of gives you the best of both worlds:

const theRef = useCallback((node) => {
  if (!node) return;
  const spans = node.querySelectorAll('span')
  gsap.to(spans, { autoAlpha: 1})
},[])
...
<div ref={theRef}>
  <span />
  <span />
  <span />
</div>

If you have to use generic selector strings, test, test, then test it again under a bunch of different circumstances. From an animation standpoint, there likely wont be a performance hit, but make sure that garbage is being cleaned up because that can really bog down a site if you don't kill animations on componentUnmount s.

For a very general intro to React + GSAP this article is a great place to start.