Animating Array of Objects

[connor.online]

Hey All, 

I'm having a difficult time figuring out the correct way to animate a mapped array of objects in React. This may sound a bit vague, so specifically, I'm trying to animate each object in the array, eventually with a Scroll Trigger, but for now I can't even seem to make them animate initially. I understand how to animate an array, but not the individual key/values in an array of objects.

My guess is that the typical useRef setup is only targeting the last object in the array, and I'll need to create a Ref for each key/value in each object, I'm just not sure how to go about that. Again, I'll be setting up a Scroll Trigger after I get the animations working. 

Thanks for the help!

-Connor

(file below)

index.js

[GreenSock]

That's definitely more of a React question and unfortunately I'm not much of a React guy. However, I took a crack at a quick demo with your code: 

See the Pen PoeNqGa?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'm pretty sure this is not valid: 

ref={titleRef.current}

As far as I understand, you must assign it as the ref itself, not the ".current". 

 

And it also doesn't seem right to assign those inside a .map() where it's looping through a bunch of things - a ref is supposed to be unique. 

 

The new gsap.context() should make this whole thing much easier - you don't need refs at all except for the root. Use selector text that's scoped to that component's root element. That's what I did in the demo above. 

 

Does that help? 

[connor.online]

Ah great catch on the ref.current, I think I tried that when nothing was working haha. Reading up on .context() now, thanks for the demo! I found this article (potentially the only one) matching my use case, but .context() seems way handier than just creating an array of refs.

 

Thanks again!

[connor.online]

Wait wait wait, one more question! (hopefully)

 

So the gsap.utils.toArray("selector-text") is creating the array of animatable "project" divs, but if I want to animate the individual elements within that div, can I just add the animations to the forEach function under a timeline? Or do I need to create a new toArray + forEach function for each element?

 

I'm doing a horizontal scroll where each project will be 100vw, so I'd like to stagger and animate everything individually.

 

Thanks!

 

Edit:

Does ScrollTrigger even work horizontally with a right and left scroll, or just an up and down scroll?

[GreenSock]

9 hours ago, connor.online said:

So the gsap.utils.toArray("selector-text") is creating the array of animatable "project" divs, but if I want to animate the individual elements within that div, can I just add the animations to the forEach function under a timeline? Or do I need to create a new toArray + forEach function for each element?

Yeah, you can do whatever you want. I'm not really sure what your goal is, but you can use querySelector() or querySelectorAll() on the element inside your loop to get whatever you want inside that particular element. This doesn't have anything to do with GSAP - it's just a logic/JavaScript thing. Example: 

gsap.utils.toArray(".project").forEach(project => {
  // animate all the children in a staggered fashion
  gsap.from(project.children, {x: 100, stagger: 0.2});
  
  // or just two specific elements: 
  let title = project.querySelector(".title"),
      subhead = project.querySelector(".subhead");
  gsap.to([title, subhead], {rotation: 360, stagger: 0.2});
});

 

9 hours ago, connor.online said:

Does ScrollTrigger even work horizontally with a right and left scroll, or just an up and down scroll?

Sure, just set horizontal: true

[connor.online]

Oh great, I didn’t think you could use query selectors with gsap + react. I’d heard Refs were the only way to call an element outside of the scoped .context() obviously. I’ll get after it then.

 

thanks!