Jump to content
Search Community

React (Next) animating nested elements

Nye test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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! 🙏

  • Like 3
Link to comment
Share on other sites

@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

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...