React SVG Animation with React Spring – Part 3 – SVG Path Animation

hey i'm tom and in this video we are going to implement this animation using react and react spring to do that we are going to learn about a famous technique used for animating svg paths and how it can be applied in react [Music] before we dive into animating let's scaffold out a new react project i'm going to use create react app but feel free to use whatever tool link you like let's cd into the project folder and open our favorite code editor let's run yarn start open the browser and we should be good to go now that we have created a new react project we need to grab the svg from somewhere you can create your own using your favorite vector editing program which is what i did using figma or you can download the one that i'm using you can view the link to it in the video description either way copy the contents of the svg and put it into your favorite code editor if you now open the browser and hit refresh you should see an image of a shield with a check mark we are now going to extract few components out of the svg code let's first create a check mark component and copy the respective svg path into it and include the check mark component right into the svg code now open the browser and nothing should change from the visual point of view the shield and the check mark should still be there [Music] let's now focus on the shield itself it consists of two different parts in terms of the svg code these parts are fairly similar they both have a fill and stroke property although of a different value they have the same stroke width [Music] and they both have a d property although it's different for each of them because those two parts are similar we are going to create a single shield part component which is going to accept color and d as arguments and it is going to return a left or right shield parts based on the properties that we passed to it now that we've created a reusable shield park component let's actually use it down in the svg code first let's create a left shield part and copy the path definition and color then create a component for the right shield part and copy the path definition and color onto it we can now hit save open the browser and the shield should still look exactly the same we've successfully split the svg into components and we can now start planning the animation let's have one more look at what we want to achieve and this time in slow motion and try to observe what parts is the animation made of [Music] so the first thing that animates is the edges of the shield and this is actually going to be one of the most interesting and challenging parts because you have to animate the svg path then the second thing is the shield background which animates and this should be pretty straightforward i think and the last part is animating the check mark and this is going to be really similar to the first part so as i mentioned the most challenging part of this tutorial is animating the svg paths in our case that means the shield edges and the shield check mark in order to animate an svg path we must learn about two properties which are vital for the animation that's stroke dash array and stroke dash offset stroke dash array turns a solid svg path into a dashed svg bath and defines the length of the dishes and the length of the gaps in between them and stroke dash offset moves the dishes along the path if you're confused about what the properties actually do and it doesn't make sense to you right now that's totally fine because i'm not going to demonstrate what i mean with an interactive demo so here we've got the shield you want to animate and i've created two sliders which are going to set the stroke dash array and stroke dash offset onto the check mark and we can observe how it behaves when we move the sliders if i move the stroke or a slider the check mark immediately becomes dash and as i move it to the right the length of the dishes increases and if i move it to the left the length of the dishes decreases let's now focus on the stroke dash of the slider as i move it to the right you can see that all dashes which the check mark is made of move to the right and if i move it to the left then all dashes move to the left so we now have a basic understanding of what the stroke dash array and stroke dash of set properties do so we can now start experimenting with them a little bit first try moving the stroke dash array slider all the way to the right and let's see what happens and by the way i should note that the slider is done in way so that its rightmost point matches the length of the check mark which i got by calling the get total length method on it but don't worry we'll get to that in more detail soon anyway once the slider is moved all the way to the right you can see that the check mark is no longer dashed or is it well actually it is but as the length of the dashes match the length of the check mark we have no way to tell that it is dashed in fact it's virtually made of a one long dash okay so what if we now moved the other slider the stroke dash of the slider so let's try it alright so you can see that as we move it from the left to the right the check mark is disappearing and vice versa if you move it from the right to the left well wait a minute if we move it from the right to the left it actually resembles the animation that we are trying to achieve doesn't it alright so let's recap what we have done in order to quote unquote animate the check mark so first we need to set the stroke dash array to match the length of the check mark and we can receive the length of the check mark by calling get tool to length on it next we're going to set the stroke dash offset to match the length of the check mark which we can once again get by calling the get total length method and lastly we want to gradually decrease the value of stroke dash offset all the way to zero and we're going to use react spring in order to do that in a minute we first need to measure the length of the check mark let's first import use state from react where we're going to keep track of the check mark length and then we're going to pass a function to the ref of the path so if we actually do receive rf in the callback which we by the way don't when the component unmounts which is why we do the check we're gonna call get tool to length on it and pass it as an argument to the set length call before continuing let's actually install the react spring library which we should have already done by now once the react spring library is installed we can import animated and use spring from it and we are going to call use spring in the check mark component and it is going to return animated style which will then pass on to the path element [Music] the first property we are going to set in use spring is the stroke dash array and we are going to set it to length which is the length of the check mark and we actually will not be animating this property but you can still average the use spring hook in order to put the property onto the path element the second property we are going to set is stroke dash offsets this is the property that we will be animating so it's going to be 0 if the toggle variable is true and length if the toggle variable is false next make the check mark component except the toggle variable which will trigger the animation and let's turn the path to an animated path so that it works with the react spring properly and finally pass the animated style into the style property of the path element you might have noticed that although we made the check mark component accept a toggle variable we don't actually keep track of the toggle state anywhere we're gonna fix it now and we want the toggle variable to be false initially and then after their component bounce we want to turn it to true to trigger the animation and because we first need to perform some measurements such as getting the length of the check mark we can actually set it through immediately after the component mounts but we need to wrap it in a set immediate call which is something similar to set timeout finally pass the toggle variable onto the checkmark components and open the browser cross your fingers hit refresh alright the check mark is being animated [Music] if you recall the svg path animation that we used to animate the check mark is also used to animate the shield edges the technique for animating the check mark and the shield edges is identical so it might be a good idea to extract the animation logic into a animation hook [Music] so the hook is going to be called use animated path and we're going to copy the length state to it as well as the use spring call we'll also make it accept the toggle variable to trigger the animation as for what the hook is going to return it's going to return style and draft which is used to measure the length of the path we can now go replace the animation logic inside the check mark component with a single use animated path call from which we are going to get animation props which will then spread onto the animated path element [Music] if you go back to the browser nothing should change from the visual point of view now that we have a reusable use animated path hook we can animate the shield edges quite easily scroll down to the shield bar component make it accept toggle variable to trigger the animation and use the same use animated path hook as in the check mark component next turn the path into an animated path spread the animation props onto it and hit save finally scroll down to the bottom and pass the toggle variable onto both the right and the left shield part hit save open the browser and refresh and well it seems like what we have done doesn't work or does it well in fact it does if you look really carefully you can see that the edges of the shield are being animated it's just that they have the same color as the shield background so you can't really see it at the moment so let's fix it right now by completing the last part of the animation that is animating the fill that means the background of the svg let's start by renaming animation props to animation stroke props so that we don't get confused next we're going to get animation fill style as a use print call in which we're going to pass the fill which is going to be equal to the color that we receive in the shield bar component or the white color based on the toggle property finally we need to pass both the animation stroke props dot style so that it doesn't get overwritten as well as animation fill style into the style property of the animated path element now you can open the browser hit refresh and well it does work but there is still room for improvement as far the timing of the animation so that it's the edges of the shield that animate first the background of the shield that animates second and the check mark that animates last we can leverage the fact that the use spring hook accepts a delay property and pass different delays into different use sprint calls first let's make our use animated path hook accept a delay which will then pass into the use spring hook next scroll on to the shield component and we won't actually pass any delay to the use animated path call as we want the shield edges to animate first thus have no delay but we're going to pass a delay of 250 milliseconds to the other use sprinkle which is responsible for animating the shield background and finally scroll up a little bit find the check mark component and pass a delay of 500 milliseconds into the use animated path call there because you want to have the check mark animate last now open the browser hit refresh and i think we're done alright so i hope you liked this video about animating svg paths using react spring it would be very kind of you if you left some feedback down in the comments and with that i hope to see you in the next video you

Channel: Tom Dohnal

Views: 947

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

Id: hQ2VJGPYsV0

Length: 15min 44sec (944 seconds)

Published: Mon Mar 01 2021