GSAP - React staggerFrom on props.children

[JeremyTob]

Is there a way to animate children #staggerFrom in a react component which has received children as props.children ?

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

The way I normally attack this situation is using React's lifecycle methods, most specific the componentDidMount method. With that you know for sure that all the child have been rendered before making the animation.

 

This is a sample that uses a code similar to that. Unfortunately I don't have any samples around with the specific behavior you need but hopefully you'll get the gist of it:

 

See the Pen xLzybx by rhernando (@rhernando) on CodePen

Basically when creating each child (which in this case come as a hardcoded array, but getting the data via props shouldn't be much different) you give it a unique ref attribute to each which then you can use to loop and create the timeline or the stagger instance if you like (to create a stagger instance just reach to the array in the props and that should do it), then create the timeline and finally play it. I'll try to whip something during the afternoon that matches what you need.

 

This is another sample but it uses a different approach, since it uses Transition Group since the elements are mounted and unmounted depending on the user interaction. It doesn't use a timeline or stagger, just a simple delay. This relies in the fact that the code is executed very fast (for larger apps you could consider server side rendering or perhaps another approach, once all the elements are rendered, perhaps pagination to render a small chunk of elements) and that the components are rendered in the sequence they exist in the app's data (again hardcoded in an array). But considering the fact that in a real app React will render all those child components at once so we can rely on that delay to create the stagger effect. Pay no attention to the code that's commented out, that's there in case someone needs to use CSS Transitions. The only catch is that the duration const used in the <Transition> component has to be the same that the one used in the GSAP instance, otherwise the component mount/unmount will be out of sync with the animation.

 

https://codesandbox.io/s/7Lp1Q8WBA

 

Hope this helps.

Happy Tweening!!!

[Carl]

Thanks, Rodrigo! Happy New Year!

[JeremyTob]

@Rodrigo Thanks for the guidance, I managed to get it working.

 

Here's the pen, just in case anyone needs it.

 

See the Pen RxgqXz?editors=0110 by anon (@anon) on CodePen