React SVG Animation with React Spring – Part 2 – SVG Scale and Rotate

hey i'm tom and i'm going to show you how to create this animation using svg and react spring it's a little bit more tricky than it might seem because animating scale and rotate transform properties is a little bit harder in svg compared to html first we need to grab an svg image go to android.co and search for private data then download the svg and copy its contents right before we start animating an svg it's usually a good idea to extract the parts of the svg that we're going to animate into separate components in this video i have already done that for you but if you don't know how to go about it i have covered it in detail in my previous video i also set up a trigger state variable and a button to trigger the animation if you have some previous experience animating using react spring you might think oh this animation is really easy i'm just going to animate the scale and rotate transform properties with the used springs hook and apply it onto the svg icons this sounds like a perfectly reasonable thing to do so let's give it a try first import animated and use springs from react spring then scroll down to the main animation component and we are going to get the springs as a result of calling the use springs hook we want three springs one for each icon and we'll be animating the transform property so when the tackle variable is truthy we want to set the rotation to 0 degrees and the scale to 1 so that no scale is applied and when the toggle variable is falsy we want to set the rotation to 360 degrees and set the scale to 0 so that it scales down and disappears now that we've created the springs let's go ahead and apply them onto the svg components we are going to map over the springs return the animated g element pass the start property to it and finally pass the respective icon as its chart component the one last thing to do is to replace the icons variable down in the svg code with the newly created animated icons variable let's go have a look at the what we have created well the good news is that it's definitely doing something but the bad news is well kind of obviously it's not animating the way we want it to be animating at all let's have one more look at how the animation is behaving and i'm going to play it in slow motion you can see that all three icons are revolving around one point located in the top left corner whereas you want them to be rotating around their own center points in order to understand why it's not behaving the way we want it we need to understand what the transform origin property does and how it differs for html elements and svg elements as per the mdn docs the transform origin property sets the origin for an element transformation what does it really mean though i believe it can be best explained in a combination with the rotate property where it defines the point which an element revolves around the tricky part is that for regular html elements the default value of transform origin is 50 50 which corresponds to the center of an element for svgs however the default value of transform origin is 0 0 which corresponds to the top left corner of the svg view box the following animations should give you more visual intuition for what's going on with transform origin in the first animation we are animating the rotate property of an svg rectangle which has a default transform origin you can see that the rectangle is rotating around the top left corner of the view box you might think that in order to fix it you need to change the transform origin from 0 0 to center so that it behaves the same way the transform origin behaves for html elements by default to apply this fix however you'll be disappointed as you'll see something like this the rectangle is revolving around the center point but not its own center point instead it's rotating around the center of the svg view box fortunately there is a transform box property to a rescue it is supported in all modern browsers it specifies what the transform origin property should relate to the default value is content box however we can change it to fill box which makes the transform origin property relate to the svg element itself rather than the view box now is the time to apply what we have learned in addition to applying the animated style to the animated g element let's also apply transform origin center and transform box fill box hit save and let's see how we stand so the icons are now rotating and scaling properly nonetheless the original animation feels a little bit more playful as the icons are not animating all at once and they are bouncy to add the staggered effect so that the icons are not animating all at once let's leverage the delay property we take advantage of the fact that index is passed to the map function which enables us to set different delays to different icons let's find out if it works so the delay is getting applied properly now let's add a little bit of bounciness to add bounciness to the animation we need to change the spring animation config the friction properly specifies how resistant the spring is going to be what it means for the animation is that the lower the friction the more bouncy the animation is going to be the default value is 26 so let's try 16 instead and see where it goes if we now play the animation it finally looks like the original one if you would do this animation in a framer motion instead it would be probably a little bit easier because frame motion takes care of applying the scale and rotate transform correctly even for svgs in frame motion you define variants instead of using a hook which you then pass to motion.g component and change them using the animate property another purple option for animating in javascript is gsap it is a more original library and it doesn't have first class support for react so you have to take care of more things manually nevertheless it has a slightly better support for animating svgs then react spring as you don't have to use the transform box property to make rotate and scale animations work so that's all that i've got for you today i'll be very happy for any kind of feedback and hope to see you in the next video [Music] you

Channel: Tom Dohnal

Views: 879

Keywords: react spring, react animation, react svg, svg animation, framer motion, react gsap

Id: GZYy5t16ucs

Length: 7min 45sec (465 seconds)

Published: Sun Dec 20 2020