React SVG Animation with React Spring – Part 1 – Basics

[Music] hey how are you doing i'm tom and i'd like to show you how to turn this into something like this so here is the svg that we are going to animate what we are going to do is copy the svg source code search for svg to jsx and click the first result now paste your svg on the right hand side you can see the svg that got converted to jsx finally copy the jsx and paste it into your editor after you hit save and open the dev server you should see something like this in your browser let's go ahead and start coding first let's decrease the size a little bit so that it fits in the screen what we're gonna do next is to extract the four envelopes that you can see in the image into separate rear components so that it's easier to work with the components are going to accept props and pass them onto a g component which is something like a div in html but for svg let's do that for all four envelopes [Music] create an array and put the newly created envelope components in there do not forget to pass the key prop to each item in this array [Music] now comes the hard part we need to locate the svg code that corresponds to these envelope components right click one of the envelopes and choose inspect element from the pop-up menu and the dev tools will appear try to see which svg elements correspond to the parts of the envelopes you can also press delete and delete some parts of the svg and see how the image is affected you know just play with it and try to see a pattern after playing with it for a while i can see that one envelope consists of two path and one g element click one of the path elements and copy some of your contents this way it will be easy for you to locate it in your text editor search for whatever you have copied and grab two path and one g elements and put it into the envelope component that you have already created if you save the file the envelope will disappear that's because you have to include the array of the envelope components into the svg code the next part is quite boring you need to locate the remaining envelopes in your svg code and put them into the envelope components before we dive into animating the image we need something to trigger the animation grab the ustade hook from react and create a simple toggle [Music] [Applause] [Music] button we're gonna use react spring library for the animation itself go ahead and import animated and use springs from the library we'll pass two arguments to the use springs hook the first one is going to be the number of items we want to animate the second one is going to be an array in which we are going to specify how the animation should behave what css properties we want to animate well i think using transform and opacity is a good start as for the transfer property we're going to use translate 3d in order to move the envelopes from the left to the right and vice versa when the toggle variable is true we want the envelopes to stay at their initial position so we pass 0px for all the translate 3d arguments when the toggle is false we want the envelopes to move to the left so let's pass -400 for the first argument and 0 for the remaining ones as for the opacity we want full opacity when the toggle variable is true and no opacity when the toggle variable is false the use springs hook returns an array of animated values that we can map over to create animated envelopes in the function that we pass to the map function we're going to use animated.g using animated.g instead of a regular g element enables us to pass animated values from react spring into the style property of the element but first let's pass a corresponding envelope item from the envelopes array as children don't forget to pass a key property and we'll just use index finally pass the animated style variable to the style property after we change envelopes for animated envelopes in the svg code we should be good to go all right so there seems to be problem within our animation the opacity is getting applied properly but the transform seems to not be getting applied at all well let's just try to debug that so it seems like i forgot to pass px right after 400. did it do the trick well seems like it didn't so the other problem seems to be that i pass translate instead of translate 3d let's see if that works alright it worked the envelopes are now being animated honestly i think there's still plenty of room for improvement for this animation look at the trajectory of the envelopes seems like it's quite short and the opacity is not really getting applied to fix it we need to change the view box on the svg element the view box specifies what part of the svg is visible the first number specifies the leftmost point so let's change that if we now hit save the image gets shifted a little bit to the right hand side and there's more room on the left hand side but there is a problem the image is cropped that's because the third number in the view box doesn't specify the rightmost point but it specifies the width of the svg so if we decreased the leftmost point by 200 we also need to increase the width by 200. hit save and see if the animation looks good it seems like it does the next problem is a little bit trickier although the envelopes are moving from left to right and vice versa there is no upwards and downwards movement it looks really unnatural because the envelopes are a little bit rotated and we don't account for that rotation so the question is how to find out what the right amount of upwards and downwards movement is in other words what value should we pass as the second argument to the translate 3d function you could either try to pass some random values and see if it looks natural and fine tune the animation this way or we can use a little bit of trigonometry to try to find out the right digits so i decided to use trigonometry just to be super precise the formula that we are going to use for the white part of the animation that is the second argument that we passed to translate 3d property is 400 pixels times cosine of the angle at to which the envelopes are rotated to find out the exact angle go to the depth tools try to locate the envelope and grab the angle you can now use your calculator or you can just trust me that the result is 49 now you can pass 49 as the second argument to the translate 3d function and let's see if it did the job unfortunately the envelopes are moving but they are not moving in the right direction and that's because i accidentally passed 49 instead of minus 49 once we fix that and play the animation again you can see that the envelopes are moving in a very natural direction so there's one more problem that i'd like to tackle and that is that the envelopes are moving as a group and i would really like them to be moved individually one after another to create a beautiful staggered animation effect in order to do that there is basically two options you could either use the used trail hook from react spring or use the delay property on the use springs hook we're going to do the ladder if we pass say 100 milliseconds as the delay property it's not really going to work because it's going to add the same delay to every individual element so there's not going to be any staggered effect let's say we change the delay to one second instead of 100 milliseconds and see what it does you can see that there is a delay after we press the toggle animation button but the very same delay is applied to all elements in the group instead we want a different delay to be applied to different envelopes to achieve that we can leverage the fact that a index is passed to the map function and the index is different for every envelope we can specify the delay as i times 100 so that there is not going to be any delay for the first envelope 100 milliseconds for the second and so on now if you play the animation the envelopes are not moving as a one group but they are moving one after another alright so that's all i've got for you today what i'd really appreciate from you is if you give me some feedback on this video write in the comment section just type in what you liked about the video what you didn't like and with that see you next time [Music]

Channel: Tom Dohnal

Views: 3,889

Keywords: react spring, react animation, react svg, svg animation

Id: fnzlniSEFN4

Length: 12min 36sec (756 seconds)

Published: Sat Nov 21 2020