React (Next) animating nested elements

[Nathan N]

Hello!
I'm working with Next.js and have run into a logistical issue with Refs.

https://codesandbox.io/s/nested-react-next-gsap-gvksxp

^^ In the sandbox I have my IndexPage mapping out a few items, problem being, almost half of the elements need animation, and this means doing

const thing = useRef([])
thing.current = []

const addToRef = (el) => {
  if (el && !thing.current.includes(el)) {
    thing.current.push(el);
  }
};

A bunch

 

I have animated the text but targeting the rest of the stuff that needs tweens seems like a ton of work (unless I'm missing something)

 

Is there a recommended approach for animating a bunch of children elements that are being mapped out? I'd love to use a ref on the container div and target down to any level with .children[i] or .querySelectorAll but this hasn't quiet panned out in my experiments.

 

I appreciate the advice, please let me know if my demo needs adjusting or if I can clarify anything!

 

Nye

[Cassie]

Hi there! There's a section in our react guide on this.

https://greensock.com/react/#descendants

Happy tweening!

[noviedo]

Hey @Nye, I just did a quick refactor to avoid using the addHeadingRef() function, I isolate this code in a little component, and then I just did what @Cassie said, I used the gsap.utils.selector() function and I just use one ref (const containerRef = useRef(null) to map the elements
 

const q = gsap.utils.selector(containerRef.current);

gsap.to(q(".heading"), {
  xPercent: 5,
  duration: 3,
  repeat: -1
});

https://codesandbox.io/s/nested-react-next-gsap-forked-x4fdvr?file=/pages/index.js

 

I hope helps you! ?

[Cassie]

Thanks so much for dropping in and helping with this @noviedo ? Champion!

[Nathan N]

@noviedo That is a sick way to componentize that animation, love it! Thank you a million for throwing that bit in there, it will make my life going forward SO much easier.

@Cassie Thank you as well for reminding me of selector, for some reason I was convinced it wouldn't target children of children despite it being akin to querySelector.

Thank you both for your time in helping me work through that, appreciate it!

Nye