SVG Animations with React Native

hello react native developers i hope you are well william here recording from beautiful switzerland i have a new animation intro for my videos and in this video we are going to learn how to build a first sequence in react native using svg animations and re-animate it too so let's follow the footage [Music] guys this was the new intro and we're gonna build the first sequence which is the stroke animation so each letter has a stroke animation there's two stroke animations overlaid on top of each other one which is black one which is colored and they have different speeds and there is also some randomness in the order of letters like the progression for each letter different colors and so we're gonna build this in react native with svg and then once we're done with it we're gonna animate the react native logo in the background so we will start with figma and i'm gonna write the word react native and the first thing we're gonna do is to convert this text into an svg path and you can do command e or flatten selection and now you see it's an svg path this is not text anymore so if i do this so i'm going to copy the svg path copy svg so here i have an empty component where we're gonna build our animations and uh i have the colors which are used in the intro so i'm gonna create an array called path and paste this vg so i need these values for the view box i'm gonna call it view box with and view box right free um okay and i'm gonna do an array of path so i'm gonna replace this one with nothing and so this one with a comma oops and here we probably get a warning from yes nint that we have the max max length which we can disable for the file and let's display this path to see if everything is in order so first i'm going to create a container a view container the style so let's call it layer so i'm going to create a style sheet [Music] so flex 1 justify content center and align items center and we can put our svg camera and so we import for from react native sdg and for each path so we map so we have the path the key so we're going to use svg path d uh stroke black and stroke weave let's say 10. and key is so i need to import paths okay and we need to import path from reactivity okay that's good so now let's add the size so we know this is of your box so the weave is gonna be the weave of the screen but we're gonna add some padding so 32 pixels on each side so it'll be -64 and the height guys do you know what the height is it's the height of the view box no it's a weave of the weave over canva times the aspect ratio of the view of the of the svg which is vi divided by we v with so height is [Music] wave times aspect ratio which is the height divided by v wave right this is the aspect ratio of our image image i mean it's a vector but and this is what viewbox does right it maps the you have the coordinates from our canons or react native and then the coordinates here of the canva we use in svg and so we want to make sure these coordinates are always valid no matter you know this the position the size of the canva and that's what where view box comes in it allows us to map canva coordinates to react native coordinates so we have weave height and then we can do view box zero zero v weave the height just serialize it to a string i just like this syntax better instead of using concat or so that looks good now you see it gets cut on the edges because the stroke is of 10 but the center the center of the stroke of the tent is in the center of the path so the stroke is centered on the path so we have five points extra everywhere and i think i'm gonna so here you see if we if i remove the fill i add the stroke and it has a stroke of 10. so you see also oh and it's centered you see it's also you have the same same issue and so yeah first of all if i do copy as svg so we get you see so we're gonna do margin equals 10 so we add the margin here and then we need to add so this is our new view box so what we so what we did we had the version which was filled but the view box here what didn't even include the stroke so here at least we have the the stroke and then we need to add the five on each side so i think i will do plus margin times two no no no no i'm tempted to do it only to not modify the aspect ratio to do here plus five so margin divided by two margin divided by two and we need also to do it for this side and this side so it would be minus margin divided by two so first we got the proper viewbox and then we added five padding everywhere on each side and now it looks good so let's animate let's animate this path and so we're going to create a component called animated stroke so we pass this parameter which we don't need so let's create this component okay these uh i don't know i think they are fun i like to do these svg animations so we have d so which we get as a property [Music] and so here we can do again path d equals d we can do so struck 20 not 10. no black stroke weave so how are we gonna animate each stroke we're gonna get the length of the path we're gonna do a stroke dash so if i go back to figma and i go back to the stroke so you see here you have dash so i can do 10 or 100 so you have 100 of uh space we um but we're gonna do it so we want a full length to be trans to be empty and the full length to be struck so we can go from zero to one and to measure the length we can use an npm package um and we get it and we get the length of the path and we can calculate animation react uh native svg can give us also provides a method to do it and since it's you know you we would have to parse the path twice and so on i would do it with react native sdg but to get access to this information from ignitiong we need the component to be rendered first so we're going to add the state which is the length and once the component is rendered so using on layout we're gonna do the measurement if you were to use an npm so here we make our components stay full if you use an npm package you keep it stateless but then it requires quite some computations you would have to do memorizations and so on um i just like the approach of using it from regulative svg and i think it's a cool feature so here we use it for path later on in this tutorial we're going to use it for different shapes so yeah let's measure our path and then we can use this is the information we need the length of the path to do the animation so i'm going to create a state which is a length which isn't going to be set length provided to us by react native svg and default value 0. now we need the ref to call the measurement and this is going to be an animated path so i'm doing this now so we can get the proper typing for the ref and an animated path we use animated from reanimated create animated component reanimated and the ref so we're gonna use use ref and let me set the type here of the ref it's gonna be type of animated path so now when the component is mounted on layout we can do the measurement so on layout set length oh sorry about that set length and we're gonna do ref dot current dot get total length how do we check if this works so we want like we said we want the length to be so we want the stroke dash array to be a full so stroke to be a full length so full empty for the length and full for the length but what i just said doesn't make sense but let's see stroke dash array that's what we want right we want length length which we can shortcut and you've seen it when i did it in finger i just typed 100 which can shortcut to this one now this should be black i love how i waited to run it to to get but now we can do the struck dash offset to move this line around and so if we move it to 100 percent it's going to be completely transparent so i can do for instance alf would be so length times 0 5 or length divided by 2 if you prefer so we have alf if we want 90 i do times 0 95 90. so 0 9 but of course here we this is ten percent but we can do length minus and zero so this is ninety percent and zero is the full so we just need to animate this now so we need an animation value to drive the whole animation and we're gonna create a single animation value which is gonna drive the whole animation so use shared value and we're gonna assign it a timing function so use effects progress dot value equals with timing we go to one duration i don't know three seconds four seconds whatever it doesn't matter easing important here we need because you see you saw that the stroke animations at different speeds so here we're gonna use uh linearizing we go from zero to one easy and then within our animated components we're gonna decide the timing so easing dot linear okay use effect okay that's the dependency here easing from reanimated this one we can remove the colors we're gonna need in the animated stroke and now we can pass progress as a property of animated stroke so any progress is an animated shared value and um yeah it's animate so can do [Music] stroke animation is use animated props and we return this property but animated so it will be stroke dash offset is length minus length times progress that value and then we'll add the easing later so progress that value goes from zero to one so this goes from zero to length and so this goes from length to zero and we saw that at length we had the full path no yeah at length we have the full path at zero we have nothing so when this one is at length here we have zero and when this one is at zero here we have a length because we have length minus zero doesn't make sense i hope it makes sense okay so let's have a look it's not working so the progress value is set properly stroke dash offset oh sorry about that it's animated props so now it should animate nicely cool so now we can do the background animation but we're not gonna see because they're gonna we're not gonna be able to see it because they're gonna be overlaid on top of each other and this is when we're gonna change the easing so we see that they go at different speeds and they catch up with each other and things like this so i'm going to copy this one ref on layout we don't need we know the length already the stroke we're going to pick a color randomly so how do we pick a color randomly so stroke we go in colors and we need to generate a number that goes from zero to three so we're gonna do math round of math random which generates a number from zero to one times so we want three times three so three is length minus one so colors length minus one so this is going to generate around speak random color and where let's do the straw background stroke animation it's the same but with a different easing so let's select some easing [Music] so i'm really bad at picking timing functions and easing functions don't trust me on that i can show you the reanimated stuff but how to make it look nice it's uh i'm not very good i don't have a good sense for these timing functions but what i i know what i want what i want is for the foreground the background stroke animations to be always so i want the curve i choose for the background using to be most of the time above the easing curve for the foreground stroke and then they can join you see if i select let's say if i this one is my background curve and this one is the foreground curve so this one will be always above the foreground one and at the end they join you see they have the same value if i were to pick this one which flattens a bit earlier than this one they would join themselves earlier same here i mean here if this one would be my foreground easing curve you will never see or you would barely see i think the the one in the bank one so i'm gonna pick these two because this one is a ease in out so here we have couple of easing out but it has a short flattening at the end it looks pretty linear or should i take this one maybe okay and then so this one is going to be faster at the beginning so i want let's say yeah i want the foreground to be a regular ease in out so we have these here then i want to select a curve which goes above for the background so we have this one can pick this one as well um i'm gonna pick this one and this one so we can pick i guess any of these or for the foreground and any of these for the background then i let you choose what makes sense so this is going to be the foreground [Music] easing so i can get it here as a cubic bezier so here it's not going to be progress value but it's going to be easing dot bezier these are the parameters [Music] so this function this returns a function that takes a value that goes from 0 to 1 and returns the value you've seen in the curve so and now we can also add some easing for the let's i don't know let's just take one see how it goes this one so oops let's have a look [Music] yes it's very fast so i think was good i don't know what you guys think but for sure we can we can tweak it i like it uh i'm happy with it and now we can animate a logo let me put first the background so the background component is just an image so if i go here just just displaying an image see we have a nice background and so between the background and the svg i'm gonna animate react logo so let's do that so i'm gonna add a layer here so we need to make a layer an absolute position fill so we can overlay them on top of each other and yeah let's create a component called animated logo [Music] and pass the progress as property so let's create this component um animated logo we get progress which is an animated share value from the one and only reanimated so if we go back to the figma i've downloaded the react logo from wikipedia and so we have a circle and then we have three ellipses but here we have it as an svg path so i guess this one was really like custom design so you see if i do the stroke here it's not something i can animate but i can animate three ellipses and a circle so let me build an ellipse so let me remove this one at the field [Music] and i think it's rotated at 30 so i want just to build the ellipsis ellipse easily i'm going to rotate it at 50 percent ellipse so let me add some so remove the feel add some stroke oh of course face the same color it's not 20 center let me change this color to red okay [Music] something like this good enough good enough right um that's our ellipse so we have the parameters here this one i can cut back to zero um and this is our view box yeah okay let's do it um i'm gonna put a view an svg canva so i'm going to copy this to get the view box copy svg so we're going to do similar to what we did here we're not going to need margin because it's not we have the margins already in the camera but nonetheless oops no margin dimensions and so this is our kind of weave canva light so we have and then oh we have everything already the ellipse so let me yeah okay i didn't even realize that so ellipse it's okay we need to i should have pasted it into the svgr and this way remove but okay so weave is weave all right it is heightened view box is vr sorry zero zero weave the height join um yes i'm gonna make it larger much larger oh sorry okay and we can have our also little circle so let's say radius 15 no well let's see and cx why are these values and these values are these values divided by two so we could actually rewrite so anyways it doesn't matter so we could make it flexible to these two values you you see it right in case you want to make things a little bit more parametrizable and so feel is okay so it's too small let's do 40. no it's too big 30. so let's animate this guy so same story we're gonna length get the ref do the measurement on layout so these are animated so it's going to be animated circle animated ellipse okay and this one is a type of animated ellipse we do the only out we set the ref we do the layout we can check if the length is correct so we need to set the stroke dash array to the length and just two tests but we get it properly stroke of set let's say length divided by two yeah that's what we want so let's animate and we have three ellipses and then we're gonna rotate the three ellipses so in reality two right now we cannot do the rotation directly in svg because we animate it to the some processing on the transform property the thing is that the transform property in svg has a completely different shape and the transform property in vanilla react native elements so right now it's not working so we're gonna wrap this into a view and do the transform for each view so yeah let's do it so i'm gonna wrap this one into an animated view and we need to do this three times um but here of course i don't need the circle the only layout ref i only need once and i need two overlays here so style style sheet absolutely and yeah i put it on the norway because we're gonna add our animated style and we need the third one so we can now build all of our animations so we get the progress i'm thinking where to start so many things first we need uh two animation values one for the first part of the animation where we draw the ellipses second part of the animation we rotate them so i'm gonna do part one is use the right value and the first thing we're gonna do is interpolate the progress animation value so progress that value that goes from zero to one but we want the first part so if it go when it goes from zero to zero five we go from zero to one and we stay we extrapolate clamp meaning we don't go above zero and one as an output value so that's the first part of the animation and then we can add some easing and i'm gonna add some ease in out some yeah nothing just some regularizing right in out i think that is okay so that's our animation value that we draw drive the first part of the animation and now for the second part we can do so we go from zero to one one zero so this is gonna drive our animations then we have two animations to build one for the stroke offset and one for the rotation so i can do a stroke animation and we're gonna do a worklet function here i use a worklet because we're gonna reuse this we have three ellipses and three rotations so free rotation three stroke animations so i want to re-use the same worklet instead of writing the same use animated style every time i want to factorize it into these worklets so worklet and i'm gonna return so it's always the same you know the drill that's gonna be stroke dash offset and stroke dash offset so we know that its length minus length times part 1 that value and so now i can create how should i call it animated props one or maybe i do stroke now okay animated props one use animated props i pass this as parameter we need to do it three times so we cannot write if i have animated props i can only use it for one component this is why i need to do this and when we do the callback directly like here like here sorry here we animated the text because it's used animated props it detects bubble detects automatically that this needs to be compiled into a worklet here because we have extracted it we animate it doesn't know doesn't make the connection so we have to specify explicitly that this is a worklet so part 1. value stroke animation we have syntax error here so let's try first the stroke animation so we need to do it for each ellipse two three let's have a look and then we will do exactly the same for the rotation uh okay so did we so we easing it's not from react native it's from reanimated sorry about that and now i crashed my expo client nothing happened right i was not paying attention but a few moments later so here it doesn't animate because this when it gets i need to investigate offline and file maybe a bug report if needed but this is basically undefined and i guess because of the bubble plugin it was not cut statically so i will need to move this one up so length wasn't defined but it didn't get caught statically so we need to to look into it um so knight should animate nicely yes and let's rotate so we have also free rotation so here we can copy this one we can do the rotate animation yeah so it's gonna be transform rotate and we're gonna do some value so i'm gonna call it target times part 2. value second part of the animation and target we will pass it as parameter looks good so now we can do rotate or style one use animated style and then we can do rotate animation 30 degrees pi is 180 degrees so pi divided by six so i divided by 2 and here minus so 30 degrees minus 30 degrees 90 degrees style 1 2 3 we need to import this guy two three sorry so here [Music] style one [Music] statue [Music] so looks pretty cool maybe we can make the second part faster so 175 and i mean you can customize such animation to your liking maybe i'm gonna add some fill opacity animation to the stroke so here i can add the one on the foreground fill white yes and fill opacity progress that way isn't that cool so if you are interested to learn the fundamentals of gestures and animations in react native i hope that you will check out my online course at start reacnative.dev we cover reanimated2 as well as one and my goal is to provide you all the tools and knowledge necessary in order to build delightful user experiences in react native so if you're interested please check it out at start react native dot dev guys i hope you enjoyed this example just some fun svg animations we've reanimated too in our svg animation tool belt we really now start to have some interesting tools most of them are shipped with redash so we know how to morph shapes we know how to find the position on a particular point on the particular position of the shape and here we use the path length shift given to us by default with react native reanimated to do a stroke animation and you can use it to animate the stroke of icons text you name it just use it to add delightfulness in your apps there are svg animations examples that i am extremely excited about and that i cannot wait to tackle on this channel so i am really looking forward to talk to you soon and until next time happy hacking [Music] you

Channel: William Candillon

Views: 21,569

Rating: 4.9627905 out of 5

Keywords: React, React Native, Can it be done in React Native?, TypeScript, JavaScript, Svg, Animations

Id: oZHIwKJHrq0

Length: 42min 33sec (2553 seconds)

Published: Tue Oct 20 2020

Reddit Comments

[u/henryp_dev]

At a job interview I was once asked where I see myself in 5 years, I said I want to be William Candillon

[u/janithaR]

We could do the same with After Effects and Lottie but with way less meddling with code right?

[u/FernandWTF]

Hot ones?