React SVG Animation with React Spring – Part 4 – SVG Morph Animation

in this video we're going to learn how to create this svg morph animation using react spring the video itself is divided into four different parts in the first one we're gonna learn something about the svg morph animations from the theoretical standpoint this means that we learn what svg values needs to be animated or like what properties needs to be animated to make one shape turn into another one in the second part we'll jump into a graphics editor figma to create a custom svg which is going to help us animate it very easily then in the third part we're finally diving to the code itself and we're gonna see that it's pretty straightforward like most hard work is going to be done in figma in step number two and finally in the fourth step we're going to learn how to create the svg animation without the need for a custom svg so it's going to be a bit more difficult in terms of programming but at the same time it's going to allow us to create the animation without the need to create custom svgs in graphic editors all right so let's say we've got these two curves one of them looks more like a frowning mouth and the other run looks like a smiling mouth and both of them would be probably denoted by the path element in svg so the question is what needs change in the path element to turn the frowning mouth into the smiling mouth if you take a look at the path element you'll notice that it comprises of the d attribute which stands for definition it defines the shape of the path the path itself is made of like several curves and lines and these are denoted by letters and numbers the gist of it is that letters they denote the type of the curve and the numbers they define the curve dimensions or the shape of the curve the angles so if you want to animate one path into another it's oftentimes best if it's got the same curve types that means the same letters and it only differs the numbers like in the angles in the curve lengths and so on there is a kind of unfortunate consequence to that and is that if you happen to have two random scg files you're not probably going to be able to animate between those very easily because they're going to have different number of curves like different number of points so you'll need to make sure that they have the same number of points up front and that is something that we're going to be having look at in part two so we won't be creating the svgs from scratch that would be very hard and it's well beyond the scope of this video you're gonna need some already existing emojis or images of emojis as templates so we'll head over to emojipedia where we can find all different emojis and we'll use the disappointed the neutral and the hardest emojis we are going to choose twitter variants of the emojis because they are the easiest to animate and we're lucky because we can find the source images to all the twitter emojis on github so if you click assets then svg you'll be presented with a list of all twitter emojis the names of the files correspond to the unicode codes of respective emojis so in order to download the images of the emojis that you want we'll go back to emojipedia grab the unicode code and simply find it on github then we'll simply download the svg files and save them to your computer please bear in mind that these are not the final svgs that we're gonna animate these svgs have different number of points so they are very hard to animate they are simply going to serve us as templates for our own svgs once we've downloaded all the svgs we're going to head over to figma create a new frame and then we're going to paste all the images that we downloaded we are going to make them a tiny bit larger and move them to the top of the frame then we'll copy them to the bottom of the frame we lock them and we are going to decrease their opacity then we are going to zoom in to one of the emojis we are going to press p and we're gonna start long and tedious process of something called tracking in this context tracking means that we're gonna drag the edges of the original template of the original image to create a new one using vectors which is then going to be exported using svg in this whole process you should try to limit the number of points that you use to minimum that's going to make it a bit easier but other than that i acknowledge that this whole process can be a bit frustrating [Music] you have successfully created the heart shape you should copy it and you should place it over the eye of the next emoji it's important that you keep the same number of points for all eyes of the emojis and also you should try to keep the points as close to the original locations as possible otherwise the animation is not going to be really smooth [Music] you should now repeat the whole process for the last image copy the eye over the last eye do not add any new points and try to keep the points as close to the original locations as possible [Music] so now we've got paths for all the right eyes the left eyes they're gonna be much easier as you're just gonna copy the right eyes place them over the left eyes and press shift eight to horizontally flip the eyes [Music] as for the mouths we're gonna do pretty much the same we're gonna drag the first mouth using the pen tool we are trying to keep the points that we use to minimum and then we're gonna copy the mouth place it over females of the next emojis and simply change the angles to get the right shape [Music] [Applause] [Music] so i believe that the hardest part we already did that so we can congratulate ourselves and what we're going to do next is create this circle which is going to serve as the background of the emojis we are going to copy onto the two remaining emojis as well and once we've done that we're gonna select all the circles we're gonna choose the color picker and we're gonna fill the circles with the same color as the original emojis then we're gonna select all the eyes and mouse we're gonna remove the stroke as we don't want any border and you're gonna use the color picker once again we're gonna paint them brown and finally for the hard eyes we're gonna paint them red so we're gonna use the color picker once again now for each of the emojis we are going to select the mouth the eyes and the circle we're gonna press command or ctrl g in order to group them into one group and finally we are going to explore them as svg's [Music] so we are now finally ready to jump into the code let's first create a new react app i'm gonna use create react app itself but feel free to use whatever tool you like once everything is ready we're gonna cd into the newly created directory open our favorite code editor and type yarn start to start the development server in our code editor we're going to first get rid of the boilerplate code and we're going to replace it by one of the svgs that we've created i already opened it and if i view the source of the svg press command c to copy it then i'm going to press command p to paste it and it should be ready to go if you go back to your browser you can check it and you should be able to see the svg well before we move on there is one thing that i forgot to mention you're going to be animating using the react spring library so it's a good idea to install the library go ahead and do it in your terminal now let's have a look at the svg and let's have a look what it's made of the first element is a circle and that's not so interesting because it's gonna stay the same for all the emojis so we're not going to animate it then there are the three path elements the first two ones define the shape and the color of the eyes the last one it defines the shape and color of the mouth the path elements they're much more interesting because they're different for every emoji to be more specific they differ in the path definition for the eyes and the mouth and for the eyes they also differ in the color that's represented by the fill attribute in svg [Music] we are going to start by animating the mouths it is a tiny bit easier compared to animating the eyes because the mouths differ only in the path definitions and they have all the same color what we are going to do is that we are going to create an array which is going to keep track of the path definitions for all the models the first item in the array is going to be the path definition of the frowning mode and we can grab it by using the developer tools the second item in the area is going to be the path definition of the neutral mouth and we're going to do the same you're going to open the developer tools copy the path definition and paste it into our code editor and we'll do exactly the same for the last mouth well the mouse are nice and ready they are ready to be animated but before we do that we first need to import animated and use spring from the react spring library and we need to replace the path elements for animated above so that they are compatible with the react spring we'll also in produce states because we're gonna keep track of the currently active index which is going to correspond to the emoji that we're gonna be showing at the moment in order to switch between the emojis we're gonna simply use three different buttons and the only purpose of these buttons is going to be to set the state to the corresponding index and we're gonna use some very basic styling in order to highlight the currently active button if we now go back to the browser we're gonna see something like this the very same emoji but there is going to be some buttons underneath it next we are going to use the use spring hook and we are going to pass an object into it this object is going to hold the path definition of the current mouth that means the mouth which corresponds to the active index and react's string library is going to return to animated props and it's also gonna do all the heavy lifting it's gonna animate between the path definitions smoothly finally we need to replace the hard-coded path definition with the path definition that we got from use spring if you now switch to the browser and press the buttons you can see that the mouth is animating it's like magic isn't it [Music] animating the eyes is going to be very similar we're first going to focus on animating the shape of the eyes and only then we're going to focus on animating the background color of the eyes this time we're going to create two arrays one for the right eyes and one for the left eyes then we're gonna repeat the same process as we did for the mouse we're gonna open the dev tools we're gonna find the path definition of the given eye and we're gonna paste it into the array we're gonna do that for both left and right eyes and of course we're gonna do it for all three emojis once you're done we're gonna introduce a new array which is gonna keep track of eye colors we are first going to find the color of the hard ice emoji we're gonna copy it and we're gonna paste it as the last item in the array then we're gonna find the color of the eyes of one of the remaining two emojis and we're gonna fill the remaining two items in the array we're then going to introduce some new properties into the object that we pass into the use spring hook first we're going to pass the path definitions of the left eye and the right eye this is going to be very similar to what we did for the mouth part definition and on top of that we're gonna introduce eye color property which is going to keep track of the eye color of the current emoji finally we are going to replace the hard-coded path definition or colors by what we get from animation props [Music] already so let's go to the browser click the button and uh oh my days uh it's it's working it cannot be real it's working isn't it that's good news [Music] all right so i'm happy that you've made this far into this tutorial and now it's the hardest part or the bonus part which is totally optional and we're gonna learn how we can animate without the need of creating our custom svg so we're gonna use the original svgs from twitter and we're gonna use some magic in order to make the animations work anyways so in our browser we're going to open the original svgs from twitter from to emoji's github and i'll give you the links in the description or you can just go to github and find them yourself so we're gonna open the dev tools in order to examine what the svg is made of and you'll see that unlike our emojis this svg is only made of two elements there is the circle element for the emoji head and then there is just one path element for everything else however this doesn't really suit our needs as we need different path definitions for left eye for the right eye and for the mouth so what we need to do is that we need to split this path definition into three different path definitions how we are going to do that well the first step is that we're going to convert this definitions which is written in their so-called relative form into the absolute form so that it's ready to be split up in order to do that we're going to paste the path definition into this to this svg path edit tutorial i'll give you the link to it in the description of the video and we're gonna click to convert to absolute then we're gonna copy the result and we're gonna paste it into the original svg next we'll open the path definition and we're gonna be looking for letter z because letter z usually marks the end of one part of the path definition so what we'll do is that we'll find letter z and copy whatever is in front of it and then we're going to paste it into our mouths array because that's the path definition of the mouth we are going to repeat the very same process for the eyes we are going to look for the letter z and we're gonna copy whatever's in front of letter z that's gonna be our left eye and what remains it's gonna be the right eye next we'll examine the neutral emoji it's made of four elements one circle element which is not interesting for us because it represents the head and then there's two ellipse elements and one path element well it's cool that it's got different elements for different parts of the emojis unlike the previous one what's not that cool is that instead of using path elements for the eyes it uses ellipse elements for the eyes first let's simply copy the path definition of the mouth and paste it into the corresponding gray as for the ellipses we're lucky because someone has already created this handy tool which is able to convert ellipses into paths we're going to fill out the form with values which define the shape the dimension and the position of the ellipse once we're done we're going to press calculate and we're gonna copy the path and we're gonna paste it into our array we're gonna repeat the whole process with the second ellipse with the only exception that the only property that's different from the second ellipse is the horizontal position so it's gonna save us some work we're gonna press calculate copy the path and paste it into the array now let's move on on to the last emoji we're gonna open the dev tools and we'll see that there's three path elements one of them corresponds to the emoji head we're gonna ignore it the other one it corresponds to the mouth so we're gonna copy the path definition of it and we're gonna paste it into the array and the final one it corresponds to the two eyes we already know how to divide one part definition into multiple file definitions so we're just going to repeat the same process that we did for the first emoji first we're going to open this useful tool and we're gonna paste the path we're gonna press convert to absolute then we'll copy the result and we're gonna paste it back into the original path then we're gonna search for a letter z in the pod definition and you're gonna grab the first part of the path and insert it into the array and finally we'll grab the remaining part of the path and we're gonna insert it into the second array [Music] before we start animating we need to adjust the view box of the svg in order to match the view box of the original twitter svg and we also need to change the dimensions and the position of the circle next we're gonna install flubber library and this library is going to be very useful because it can interpolate between two different svg paths and what's cool is that the svg paths they don't have to have the same number of points so how are we going to approach this animation well we are going to keep track of the so-called interpolators in the use state interpolator is a function which takes a number from 0 to 1 as its input and reduce something as output in our case that something is going to be the svg path definition of our elements we are going to use the interpolate function from flubber in order to create those interpolators and we're gonna use react spring to animate from zero to one to ensure smooth animation but before we start we need to initiate our state to something and we're gonna initiate it to quote-unquote trivial interpolators it's like a term that i made up it's not anything official it's simply a function which returns the path definition of the given element next we are going to adjust the use spring parameters as we are going to use the interpolators we want to animate from 0 to 1. we aren't going to use the interpolators for animating the color it makes no sense so we are also going to include color to the two property we are going to set clamp to true which ensures that the value never goes above one which we don't want because it would break our interpolator function and we're going to set to reset to true which is going to ensure that the value the x value is going to reset to zero after every animation then we're gonna change the path definitions to make use of the interpolators we're gonna leverage the two property of spring values which enables us to pass interpolators as callbacks finally we're going to import the interpolate function from flubber and we're going to change the onclick handler of the buttons instead of simply passing the new index to the set active index function we're gonna pass a callback the first thing we must not forget is to return the new index but that's not all what we're gonna do next is that we're gonna set interpolators for the mouth for the right eye and for the left eye the first argument of the interpolate function is the path that we are animating from in our case this is going to correspond to mouths at breath index the second argument is going to be the path that we are animating to in our case there is going to be mouths at index finally we'll pass a configuration object as the third argument we're gonna set max segment length to 0.5 and what it's going to do is going to make our animation smoother the lower the number the smoother the animation is but it always comes at the cost of performance so if it's too low our performance is gonna suffer we are going to repeat the same process for the right eye and the left eye this means that we're going to pass the previous file definition as the first argument the next part definition as the second argument and the config object as the third argument well i think we can go to the browser and we'll see what happens well would you believe it it's actually working oh my god i wasn't expecting it at all alright i thank every one of you very very much for watching the video i hope that my explanations were somewhat clear and i hope to see you next time bye [Music] you

Channel: Tom Dohnal

Views: 393

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

Id: i17z_GE592g

Length: 25min 16sec (1516 seconds)

Published: Tue Oct 05 2021