Using Animations in React

[00:00:00]
>> So, someone in the chat asked, how would you do this, the CSS variable part, how would you do that in React? Because I did talk about how using a framework like React does make this a little bit easier. Or at least defining each of the variables easier than manually putting them in.

[00:00:19]
So let's say I had an array of balls, so const balls equals, just call this one, two, three, four, five. So, in frameworks like React or Vue, they have special constructs that allow you to map over an array of element or sorry an array of items and transform those into elements.

[00:00:40]
So for example, we could say balls.map and we get the ball and the index and so we could return the ball. We have to give it a key, at least in React and then, so let's reload this. Okay, so now we get five balls. So if we add style here and this was what the original question was, we could set double dash I, which is the index to I, to that value.

[00:01:23]
And so now if we add an animation here, so for example key frames, slide right, transform none to transform translate X. Let's just say 300% and we add that animation to the ball, slide right over 0.3 seconds. And let's give it both. They're gonna move at the same time.

[00:01:50]
So now if we want it to be based on their position, so sort of doing a staggering animation, we could just say calc far I and multiply that by some sort of fixed value. So 0.1 seconds for instance. And so now we have a staggering animation. So this is how you would do it in React.