Make Awesome SVG Animations with CSS // 7 Useful Techniques

combining scalable vector graphics with css animation is one of the most powerful techniques that web designers have at their disposal to stand out from the competition just look at all the amazing animated duotone icons on the stripe homepage or this looping animated explainer sequence on the gatsby homepage you don't need to be an expert designer animator or developer to create things like this oh that was easy in today's tutorial you'll build two things an animated icon the user can interact with and a looping animated sequence all of which are powered by just svg and css and in the process you'll learn seven cool techniques that have helped me with vector graphics on the web over the years if you're new here like and subscribe sadly half the people that watch my content aren't actually subscribed yet first of all what is a scalable vector graphic well what it isn't is a raster image like a png or jpeg image that you might take on your phone those formats represent an image with a grid of pixels and that means the resolution is dependent on the number of pixels in the image to get a higher resolution image you need a bigger matrix with more pixels in it in contrast a vector image uses a totally different approach that's based on geometry and math instead of static pixels if you open an svg file in your editor you'll notice it looks exactly like html markup the svg tag has an attribute called view box that defines a grid then any graphics that are computed inside that grid can be scaled up to any size because you're just multiplying the math in that grid by the image resolution now inside the svg tags we have a bunch of different elements like rect circle and polygon to draw basic shapes the shapes have different attributes to define their xy coordinates and size then you have the path element which is the most powerful element in an svg because it's like having access to an imaginary pen where you can define any sequence of lines and curves now it's good to know what's inside an svg but you should rarely need to write the actual graphics code by hand instead you should be having a graphic designer do that in a design tool like figma illustrator or inkscape all of which can export vector graphics to the svg format now once a graphic has been drawn there are some cool things you can do to the code by integrating css for styling and javascript for interaction and we'll take a hands-on look at that now by building an animated svg icon the only thing you really need to follow along with this project is an html file and a design tool like figma that can export svg you can also find the full source code on github or follow along with the article on fireship io i'm on the stripe homepage and i see this little animated triangle icon and what i want to do is reverse engineer it if we open up chrome dev tools we can then hit command p and then search for animations to bring up the animations tab this is a really awesome little feature that will record all of the animations on the page then give you a breakdown of the keyframes and which elements they affect you can pause the animation and slow it down then when you click on one of them it will take you to that element in the dom it's really useful to inspect other websites that have impressive animations going on you can see how their svg code is structured and you can even copy and paste it if you want to mess with it in your own editor a useful piece of information i've gathered by inspecting the code is that it's not actually two triangles but four triangles it's just that two of them are hidden off canvas to make the animation possible the first step in recreating something like this is to draw the graphics and to handle that we'll use a free tool on the web called figma inside the app we'll create a frame which is equivalent to the view box in the svg code we'll make the canvas a 120 units wide by a hundred units high when designing we'll think in pixels and i'd recommend drawing on the smallest frame possible that'll make it easier to align things and make your graphics pixel perfect from there we'll use the polygon tool to draw three triangles we'll give one of the triangles a different color and then decrease the opacity on all of them making them somewhat transparent you'll notice on the layers panel here that figma is automatically creating layer names for us but if you have layers that you're going to style with css or animate i'd recommend giving them their own custom names like in this case i've named my triangles dark 1 dark 2 and light 1. and when figma exports it to svg it will use those names as ids on the element allowing us to easily target it in the code with a css selector now another very important tip if you want to create duotone icons is to group your elements together based on color when you create a group it's actually going to create a g element in the svg code which is kind of like a div in html it's just a container for grouping and styling elements together so we'll select the two dark elements group them then give the group itself a name of dark group and then do the same thing for the light group now to recreate the animation we'll want to position the light triangle first then the dark one triangle after it now the second dark triangle will actually be positioned off the screen when the animation starts but we'll handle that with css so for right now we'll just position it directly on top of the light triangle that takes care of our design now we just need to export it to svg which we can do in figma by selecting the frame then clicking on the export button down here on the bottom right corner make sure that it's svg format then click on the menu to also include the id attributes on the export that'll make the file a little bit larger but much easier to work with with css animation oh and also uncheck the box to show the frame fill color and the export now go ahead and open the file up in vs code you should see markup with an svg that has a view box of 120 by 100 then you'll see group elements that have ids based on what we assigned in figma and finally inside the groups you'll find the actual paths that draw the graphics now we could use this svg file with an html image tag but we can also just declare this markup directly in the html which opens up the door to custom styling and animation go ahead and copy the code then create an html file and add the svg graphic to the body what i want to show you now is how to make this a themeable duotone icon if you open up this html page in a browser you should notice the icon there that looks identical to what you designed in figma if we take a closer look at one of the path elements you'll notice that there's a fill attribute that is coded to a certain color that's fine if the color never changes but inline styles like this are hard to override so let's go ahead and delete the fill colors from the svg code if you open up the html page you'll notice that the triangles are invisible we can change that by opening up a style tag and then we'll target the root element where we can define css variables we have a dark color and a light color then we can assign those variables to groups in our svg by targeting their id the dark group is filled with a dark color and the light group filled with the light color and now our icon is easily themable the next question is how do we animate this icon when the user hovers over it first we'll need to select the three triangles that we want to animate based on their ids we can then tell them to animate automatically using the transition property this tells css to animate all properties on the element over a duration of one second with a timing function of ease and now all we have to do is change the styling on the elements and they will animate automatically if you remember earlier our graphic has a dark triangle on top of the light triangle but we want to move that entirely off the screen before the animation starts and we can do that by setting its transform translate x value to negative one hundred percent which will move it over to the left now from there we'll target the hover event on the svg itself then we'll target the styling of each triangle individually the light triangle will just move over to the right a little bit the dark triangle will also move over to the right but it will also change its opacity to zero to fade out and then finally we have the second dark triangle which is currently invisible off the screen we can bring it back into the screen by setting the translate x back to zero and now if we go back to the demo and hover over the icon you should see the animation transition back and forth that's a good start but another cool thing we can do is target events on the svg using javascript what we'll do next is change the styling of the button dynamically every time that it's clicked to handle that we'll open up a script tag just before the closing body tag you can handle events on the svg itself or individual shapes within the svg we'll go ahead and select our triangles group using document getelementbyid then we can define a function that will be called on its click event the function contains an array of colors then we'll define another function here to randomly select a color from that array we can then change the css variables that we defined earlier by targeting the document element style css text and that will change our dark and light color variables to random values a nice little bonus here is that the color change will also be animated because we already have that transition animation on the element targeting all properties and now we get a nice little translation between colors whenever we click on the icon icons are cool but what if we wanted a looping animation that just runs in the background without the need for the user to interact with it something like that will require keyframe animations in the demo notice how we have an outline of a phone then some skeleton text pops in from the bottom after that a few icons drop in in a staggered motion from the top now i'm not going to draw this graphic from scratch and figma it's really just a set of a bunch of simple shapes that i'm sure you can figure out and of course you can find the code for this graphic on github what i do want to show you though is that we have separate groups for the phone the skeleton text and the bolt icons when the icons drop in they'll be staggered so we have those numbered based on the order in which they should appear go ahead and export the graphic and then bring it into your html just like we did in the previous example then open up a style tag and the first group that we'll want to target is the skeleton text it should fade upwards from the bottom so we'll create a keyframes animation called fade in up we can then apply that animation to the group in the svg using the animation property with the name over a duration of one second now the way a keyframes animation works is it starts with a certain set of properties then animates to a different set of properties over that duration which in this case would be one second from is the beginning of the animation which will start with an opacity of zero and a transform that will move the group slightly down the y axis by twenty percent then we can define properties for two which is the end of the animation at that point the group should have an opacity of 1 and be translated back to its original position and that's all it takes to build a simple keyframe animation that can fade in the skeleton text now we'll tackle the more complex requirement of building a staggered keyframe animation we need to target each icon in the bulk group individually and then we'll define a keyframes animation called drop in that will drop those icons in from the top initially they'll have an opacity of zero then we'll assign the animation to run for eight seconds with an easing function in addition we'll define the animation direction as forwards which tells it to use the last value in the keyframe after the animation ends in addition if you want the animation to loop you can add the infinite value which tells it to run continuously on a loop now when you have a staggered animation running on a loop you really need to think carefully about your keyframes you need to think of the animation in its entirety which in this case is a full 8 seconds and design the keyframes accordingly in this example we don't want the elements to appear for the first twenty percent of the animation then between twenty and thirty percent they'll drop in from the top then normally they would start fading out for the remaining seventy percent of the animation but in this case we want them to hold that position so we'll also keep those values consistent through 100 so that takes care of the drop in animation but now the question becomes how do we stagger it there are a few different ways you might approach this but i think the cleanest way is to define inline css variables directly in the svg itself the inline variables will have higher priority which means we can access them in our style sheet in the svg code we'll want to find each bolt group and on that group we'll apply a style that has a css variable named order which represents the order in which they should appear we'll go ahead and do that for all five icons in the svg then we can come back to our main style sheet and add the animation delay property the cool thing about css variables is that we can use them with calc to dynamically calculate a value for the delay just multiply the order value by 200 milliseconds to have each icon drop in 200 milliseconds after the other and you now have an animated svg that will impress your friends and get you a job and land you customers by standing out from the competition i'm going to go ahead and wrap things up there if this video helped you please like and subscribe and consider becoming a pro member at fireship io thanks for watching and i will see you in the next one

Channel: Fireship

Views: 296,137

Rating: 4.9818506 out of 5

Keywords: webdev, app development, lesson, tutorial, svg, css tutorial, css animation, svg animation, js, figma, design, web design, html, css basics

Id: UTHgr6NLeEw

Length: 12min 20sec (740 seconds)

Published: Fri Mar 26 2021