SVG wave animation - Two different ways

hello and welcome to this video where we're going to be exploring the world of svg animations we're going to be looking at two different ways that we can get the same type of effect one of them is the more sort of classical approach where you're taking placing an svg in the document and then using css animations to animate what we have there and then we're gonna be looking at a second one which is diving into part of the svg spec itself where the animation is actually built into the svg and this is kind of cool because instead of the first one's gonna be sort of like this thing where it's overlapping and we need the same color which in this case actually works really well but in other cases you might need a clip path and this is one way we can do an animated clip path with svgs and the animations built into the svg itself now there's some limitations around that sometimes one of these methods is gonna be better than the other one so i'll be looking at that we'll be seeing the differences between the two and then right at the end what we're gonna do is take this and put it into my pop dog project that i've been working on for a while i've been trying to clone that i've been cloning the really cool card they have so we're going to be taking that animation and putting it into our card to finally finish this project off so let's go and see how we can do all of that hi there my name is kevin and welcome to my channel we learn how to make the web and how to make it look good with weekly tips tricks and tutorials and as i mentioned in this video we are exploring svg animations but before we get to that i want to let you know that this video is being brought to you by skillshare and if you're here i'm assuming you're new to animating svgs and doing different things with it and if that is the case they might have a class that you'd be really interested in which is anna napalcha's creative coding animating svg with simple css code in this video i'm looking at two different ways we can do it but she dives a little bit deeper into the link between svgs and css animations including animating only selected parts of an svg so you can have multiple things going on it's really cool but of course skillshare doesn't only talk about svg animations they have thousands of different classes covering a whole wide range of topics and they have a really nice category of classes on both front end and back-end development as well as ui and ux so if you're looking to up your game in any of those skillshare has a whole bunch of classes across a whole wide range of skill levels for you to check out and one of my favorite things about skillshare is it's not just lessons that are presented to you but you always have projects to work on as well to help reinforce your learning now for a limited time you can use the link down in the description below to get a free trial of their premium membership and after that if you sign up for their annual membership it is less than ten dollars per month so a really big thank you to skillshare for sponsoring this video now let's go and dive in and see how we can do some svg animations clip paths all sorts of fun stuff all right so here we are in vs code and we don't have too much now we have an image here that is inside the card now once we get this wave thing done i'll bring it into the actual card that we're building but i just want to focus on the wave now so we can see how we can do it and we'll look at the different ways that we can so the very first thing i'm going to do is actually go over to illustrator and i realize not everyone does have illustrator but we can do this in other vector software as well and i have this wave that i created if you'd like to know how i made this i did another video on it earlier this week so there should be a card popping up and you can check out how i created this wave um but there's two problems with it right now um and maybe we'll get there in a second but what i'm actually gonna do is stretch this out and i know it's gonna look kind of funky the wave right now but it really doesn't matter too much at this point um we could even have this be a lot more drastic the main thing that i'm focusing on is i do have this and there's a bit of space i don't want it to be like cut right here i want to keep the space on top like that this is for the first clip path um or even you know what i'm going to flip this around i'm going to show you a fun thing about illustrator but i'm going to take it this way for now i'm going to copy it so just command c or control c and then let's go back over to vs code and back over to firefox and if i copy something in illustrator i can paste it right in here and it pastes everything now it is a little bit messy you'll see there's some extra stuff in there uh but i can come and delete this for example because i don't need the color um actually you know what we'll leave the color now so we can actually see it and we can do something like that uh so it does come in um and what i'm going to do with that actually is let's just give this svg a [Music] class equals wave and this is actually the way that pop dog did it was something like this where wrong one i want my wave i don't need that file for now my wave dot s or my wave dot css and what we can do is say that my wave uh we're gonna give it a position of absolute and actually that doesn't mean my card that i created will have a position of relative and you can see it's going on top and i can say top i'm gonna say top 25 uh two no maybe a bit more five ram and just to make sure i'm going to keep the left as a zero and um i wanted to be bigger so i'm going to give this a width of 200 percent and this is kind of important for what i want to do except oh here i'll just show you what happened border is a two pixel solid red so you can see that the svg itself is big my wave which is the svg but the path hasn't changed inside of there i could actually be styling the path instead but i think here i could just take the width and height off i think it's actually going to let it stretch there we go so it's big enough now and this the fact that it's bigger like that is perfectly fine because all i want to do is say that my we're going to do a net keyframe so at keyframes uh wave i guess would make sense and at 0 it has a transform translate x of zero and then at a hundred percent we're gonna have the exact same thing but this should go up to one hundred percent and then so the whole thing should move over its own width uh or maybe it's gonna be 50. we'll find out animation wave linear let's just do three seconds so it's not too fast oh this should be negative two it's going the wrong way so then it goes that way and it's going too far so this should be negative 50. and it's gonna go like that and then jump over now that looks kind of weird right now but what we want to do is infinite so it just keeps running it's going to go like that and then it's going to jump on over now right now it looks really weird that it's jumping on over like that but what i'm going to do is on my card i'm going to say an overflow of hidden and it looks perfectly nice and seamless and we can take off my border like that and let's go and give this uh the fill let's just turn that off actually oh it's gonna be a little bit different but you get the idea i think uh my body's background color background we'll just put this copy that uh so you know what this could just be i think we should be able to use my variable there there we go and it looks like the image is getting cropped and cut and that's exactly what they've done at the popdog site or maybe not exactly but this is the type of thing they use now my my peaks and valleys here are really sharp so for this one you i probably actually want to come in um i sort of misspoke i said i want to stretch it out for this one i'd probably want to come in with a really shallow one like that and in this case i don't really need that much empty space on the bottom so however you stretch it or smoosh it that's what it's going to look like and i think that's a really fun way of doing it it looks good you have your stuff that's going to come out here right underneath and it's going to work perfectly fine i do think that it's a little bit more fun to push things a little bit and use clip path for a number of reasons one we're gonna see there is some extra control we can get on it and it's also really fun to experiment to see what we can do with svgs all right guys future kevin here just interjecting a little bit because when i was editing this i actually realized i made a little bit of a mistake um and it's when i'm going through this i do skip out on an attribute that we need to do this animation the type of animation that we're doing in this one is in a small animation or smil the way i was setting it up here i was in firefox and everything worked perfectly fine but i checked it out in chrome afterwards and the animation wasn't working and it was a missing attribute so uh at one point you might see me add that attribute in and then it's going to disappear again so just so you know why and also it will be in the final github repo we'll have the the version that makes it work across all browsers uh so i just want to let you know about that another thing with smell is at one point chrome was going to deprecate it and not support it anymore but they have backed out on that deprecation they've decided to keep it there are some issues with smile which is one of the reasons that they didn't want to do it mostly we have to use pixel values so you know for responsiveness stuff like that it can be a little tricky but i think it is still something that is worth knowing about so sorry about the little aside here let's jump back into the video all right so what i'm actually going to do now is delete a whole bunch of stuff i'm going to take the clad we don't need any of this um but i guess we could leave this we don't need that we don't need the style we're not going to need anymore and what we're going to be doing is taking this and turning it so if i do all that nothing okay we broke it because we took off the class but um actually we could come into here we don't need any of this anymore either save um because what we want to do is look at how we can do it but just with the svg instead of having it like moving over the image as actually a clip path and to do that i think we're good there but what i'm going to do is instead of having these as the the g here i'm going to start off by we want these to be a defs which means it's a definition so if i do this and i hit save it's actually going to disappear and on my svg i'm also going to a width is equal to zero and a height is equal to zero just so even though it's defining something it has a size so it's taking up room which is kind of annoying so there we go we can vanish a little bit um the path here i don't need this class on it it's not doing anything but what we also want to do inside the defs is we want to come in and give this a clip path so it's clip path often you'll see a clip path like that and close clip path so that's going to come all the way down to inside here and we're defining our svg as a clip path now which is kind of interesting and i'm going to give this clip path an id of wave so we can select it in a minute and actually let's just see if this can even work so on my card image if i give this a clip path we should be able to say url and id of wave and look at that it worked cool right so it's coming in there and it is working um so the next thing we can actually do in here and this is where things get a little more interesting and see it's not perfect yet we're gonna we're gonna get there and we have to do some modifications because there's some weird things in here uh that i wasn't really sure how to do it took me a little while to figure out we can do an animate transform the weird name um i don't need a closing at self-closing so i want to put that there um does it want that like that no anyway i know it's hard to see animate transform i'll take the m off so you can see it animate transform put the m um and on my animate transform we want to tell it what we're going to be animating so there's a few different things so the first thing we want to do is the atri attribute name which is going to be equal to trans transform we're going to be transforming it right that makes sense where are we going we're going from is going to be 0 0 and we need somewhere for it to go to so from 2 is equal to and i'm actually going to use the width we said on my image and this is one of the limitations um of this but it's 300 pixels so i'm going to say is it 300 0 no i'm going to say 300 oh it's going to be negative right the same way as before so negative 300 zero and the limitation of this is because it's an svg i do need to work in pixels uh we want it to begin at zero seconds and we want it to go how long which is durer for duration uh duration let's do five seconds and repeat count is going to equal to in-depth indefinite definite and uh you know what whoops indefinite and hit save and look at that it is moving so future kevin here and this is what i was talking about when i did that little interjection you can see it is running perfectly fine here but if i jump on over to chrome from here it's not moving now i probably should have realized this from the beginning because here i'm saying that it's a transform but we never said what type of transform it is so actually i'm surprised it works in firefox and it's kind of cool that it does i guess but what we need to do is add in um after the or anywhere in here any of the attributes it's going to be a type is equal to translate so once i add that in i'll hit save and you can see here in chrome it is now working and if i jump back over into firefox right here so this is firefox now you can see it's working there so in both browsers it is working perfectly fine um so i won't have that in the final version on pop dog here in this demo but the github repo at the very end will have it included so this will disappear from my code once we continue on from here uh but just know if you do want it to work in all browsers you will need that to be in there so sorry about that but good thing we caught it before the video in live and back to the future back to back to the back to the regular demo except that's not quite how we want it to move right this is that problem we had at the beginning and then i was able to change my svg and change the size of it and get it to work but it's gonna be a little trickier now um you know what happens if i change my view box you might try that what if this is at or say 600 but it's not really going to do anything so the first thing we want to do that took me a little while to find is that we want it to use the units of my um the size that it's inside of to begin with on the clip path right here what i want to do is i'm going to put this on its own line just so you can see it a little bit easier we want to use something called we want to use something called clip path units and it's going to be object bounding box which means it's going to be using the object itself to get the units from and you can see the whole thing is disappeared the whole thing's been clipped away that's not what we want um and the reason is this if we want to use the object bounding box these numbers here have to be on a scale of zero to one and you can see i have like 50s a 93 all of that going you know stuff in here so there's a way of doing a transform based on actual size and you get this crazy division number or you know numbers that are really really tiny to really shrink it down uh to be the right size i found the easiest thing to do is to open it in a vector software and there's free ones out there and so here's the wave and i've already set the sub you can see over here there's a little tiny artboard if i zoom all the way in there i've already set it up for us but if we look this artboard is actually one pixel by one pixel honestly the easiest way to do it and what i'm going to do is i'm going to copy it and let's come back over to here and and then what we can do that's already there and then what we can do is i want to just change this path here i've already set all this up i don't want to redo it again so i can come all the way here paste that in and i just want to get the path right here i'm gonna copy that delete everything because i don't need that anymore and i'm just gonna change the path to that new one where you can see all the units are between zero and one so i have a full one is my biggest point eight point nine nothing goes above one and now look at that it is back now it looks really skewy with it looks kind of weird but the problem is now it's not bigger than and even my view box here i don't think i need that anymore i don't think it's doing anything um but it's clearly not working as intended because actually you know the one to one is perfect if you need it not to move but if i want it to move well what i could do is come over to back to illustrator and just double the size of it so it's the width is now 2 pixels so it's 1 pixel by 2 pixels once again i'll copy it and then i'm going to come back over to vs code come back over to firefox paste this in and again all i want is the path that this is generating copy that um now the height is all going to be on a scale of 0 to 1 but there are some here that like 1.8 i have a 2 because the width of it is 2. so i sort of lied to you and you want a one it's okay if it's a little bit bigger but it just means that anything above one is going to be spilling past it which is why before when we tried it the clip path was way too big because that's why the whole thing disappeared was because we had these huge numbers it was just covering the whole space um and it obviously wasn't working so with using these really small units like a one to one is going to cover my thing exactly anything bigger than that is outside of the scope but that's okay because if i save that now we get the wave going along the bottom just like that and it will just keep running forever um another thing that's really nice about this that we can do uh with all that there is if i come to my image uh what i can actually do is set a height on this height of say 25 or 25 cm small let's just say 100 pixels so it's going to be tiny but it's going to look really smooshed it doesn't look good we can object fit that object fit cover fixes that except we lost his head so we can do an object position top center and our guys back maybe we could do 200 pixels on that just so we can actually see them and you notice as we're changing this like if i make this 600 pixels they're becoming taller waves and as i go down to a 100 they're becoming more flat waves because it's stretching and skewing it as my image is getting taller or um or shorter so that is kind of cool so now if we want to go and take this to actually implement it into our pop dog here hmm how we can do that so let's go and take a look and what i'm going to do is we don't need that um what i'm going to do is we have my index that we're going to need and we have my main.scss that we're going to need um in my index itself i have my background which has that color on it so i'm going to place in here the image uh yeah we're going to place the image in here so it's my image game cover again which should have an alt on it we should put something well it's more decorative this one so maybe we don't really need it so if i hit save so now if we go and take a look there it is we can see it's right there so let's go back to here uh that was my background that's your dot background would be the only one who shows up um and i want to choose my image that's in there and the first thing i'm going to do is drop the opacity on it because i think it's too much we'll do like a 0.5 because it is faded out maybe even a 0.3 um in the pop dog site i believe let's go take a look yeah it's faded out there so i think just dropping the opacity works well and it's there and then with the next thing we want to do is we'll come over to my wave here we got all this working so i might as well just copy what i have and again i could implement the other system as well you know the first one i did that would work perfectly fine but since we've done all this work to do this uh let's go and take a look at putting it in and i'm just going to drop this right at the end of my document where there's nothing else so and again it is in the defs it has a height and width of zero so it's not showing up anywhere right now but it does make it uh whoops i was like i've already done it um it does make it accessible now for me it does make it available now for me to use so here on my clip path we could set the url to wave and you can see that it's working and i'll do the same idea height uh maybe i'll do like 20 percent um i will have to 20 is okay with will be one hundred percent there we go that's gonna look a little bit better now i don't think it's gonna be perfect yeah you can see it's scrolling off to the side so we are gonna have to modify it a little bit uh the width maybe this i'm gonna bring up a little bit actually and we'll do our object fit of cover there we go now it's not working and the reason it's not working is if i come and look on my car game card game width has 12.5 m so i am going to want to take that and let's actually see uh let's turn off word wrap so i can see everything can i put that right there so that's uh 12 uh 12.5 times 16 200. so negative 200 and just like that it has become perfectly seamless nice uh actually one thing i'm noticing my round corners on the top are gone do you see that so i will have to come and i'm guessing my background let's find it again dot background did i put my border radius on that border radius is there so i will have to do an overflow of hidden uh just so we keep my brown corners there so the image isn't sticking out the sides and last but not least let's come over to here and let's slow that down to maybe 10 seconds so it's a little bit more subtle and i do think that's looking really good now if this was a real project after doing this i think i would implement it the same way that popdoc did did using the first technique that i looked at i think that in this case it's probably a little bit of overkill for how i did it and it's kind of weird having the animation in the html and then other styling in the css so i completely get if that is a bit of a you know you're looking at this going i'm not sure i'd want to do it that way but i do think that there are times where this could prove extremely useful at the same time so that's why i threw it in there and yeah i think that it is worthy i think it was a really fun exploration on how we can do something like that i think this card was really really fun i am going to take a bit of a break from it for now um if anybody wants to there's already been a few people on github who have put in a few contributions toward it so if you want to do something like fix the the see more streams button and make it look a little you know i didn't do anything there so if you want to try and do that or if there's something else in there that's bugging you a little bit by all means uh i don't mind if you want to dive in um and i think at one point i will come back to this to try and make it a little bit more accessible maybe and uh you know there's a few things in here that i think could be improved still but for now i've covered all the things that i want to cover with it i really hope you enjoyed the series i know i had a ton of fun putting it together uh lots of fun explorations in here if you didn't you haven't yet subscribed please do consider hitting that subscribe button so you can get more videos like this every single week a big thank you to my patrons for helping support everything i do here every single month you guys are absolutely amazing i really really appreciate it and of course until next time don't forget to keep on making your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 41,487

Keywords: Kevin Powell, tutorial, html, css, svg, svg clip-path, svg smil, svg animation, svg wave animation, svg animation css, css wavy effect, css wavy background effects, css wavy background, html css wave shape background, animate wave svg, how to add svg waves in website, css & svg waves animation, animated svg waves, css waves for website

Id: 5YGge0RaCx8

Length: 24min 6sec (1446 seconds)

Published: Wed Sep 09 2020