How to animate on entrance SVG images gradually with reactjs?

Question

I'm quite new to React,

I have imported an SVG and would like to animate few clones of it, eventually they will end up in the same row, should i be using use flexbox?

I have done it statically using flexbox, but i would like to animate each svg component so they will appear on the screen gradually (one after the other). Any suggestions how to accomplish it?

Thank you all

Answer 1

you can use CSSTransitionGroup for react here are doct from react to do it https://reactjs.org/docs/animation.html#high-level-api-reactcsstransitiongroup https://reactcommunity.org/react-transition-group/

this animations works on enter and leave from dom of element

<CSSTransitionGroup
transitionName="example"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
 />
<CSSTransitionGroup>

Answer 2

you can use GSAP (GreenSock) library to achieve that, just trigger the animation after componentDidLoad() in your React component.

You can learn about GSAP staggering here: https://greensock.com/stagger

Hope it helps!