SVG Filters are Sick! Image Turbulence & Displacement Tutorial

today you're gonna learn how to create this very cool effect right here look at that before we begin this video sponsor Isla node and they make it easy and affordable to host your site app or service on whatever technology stack you use unlike entry-level hosting services lonoa is a step up to powerful fast fully configurable cloud computing with server plans starting at just five dollars plus no hidden fees or surprise outages Linode offers a no-nonsense hosting at a price you can afford so sign up now using the link below to get a twenty dollar credit on your new low note account hey everyone what's up Gary Simon of course a trio com so today we're going to be checking out something called SVG filters and it is an immense topic there's I over there's close to 20 different SVG filters that you can use and you can do a lot of different things to your images and other elements with SVG filters now we're only going to take a look at two of them which is turbulence and displacement map let's go ahead and check out that effect again we're also going to be using G SAP for the animations which is the green sack animation platform I and if you've never touched that before don't worry just do a channel search I've done several tutorials and a crash course on GSM as well so yeah let's go ahead and get started but first make sure to subscribe alright so something I've done here that's different instead of starting tutorial by just creating the index on HTML as I always do it's so redundant I decided just to get that boilerplate up and running so I don't have to waste a minute of my time and your time in doing so and obviously if you're watching this tutorial this is more of an intermediate to advanced topic when xsprinter concerns front-end development you should already understand the basic structure assaults happens we have our index.html linking to our main dusty SS here which is empty and that's it we have an images folder as well one two three whatever just use whatever images you wish for this effect okay so what we'll do first is start with the HTML markup alright so I just be - I don't know I'm a designer I like to make things look interesting this has nothing to do with the purpose of the tutorial some beautiful art or something how cool is this okay next up this is the important stuff we're gonna have our SVG information now the SVG itself oh there's no Emmett abbreviations for that you came in okay well whatever so our SVG we don't have to specify a view box because we're only using as a container for our filter all right so the filter is its own tag and we're going to call filter and then inside the filter is where we have all of our various filters essentially so the filters there's about 17 different filters that you can use with SVG and there's a ton that you can do with them they can be used in conjunction with one another to create a million different effects I entire course could be made just on filters probably multiple courses so it's a massive topic we're only going to touch on two here which is turbulence and a displacement map all right so the idea is we define our filters within this filter tag right here and then we pass it on to an image of some sort it doesn't have to be an image but our case it's going to be an image so what we'll do is first we're going to use and all the terb all the names are start off there prepended with Fe as in filter effect so Fe turbulence all right so it has a few attributes that you can use base frequency we're gonna have this start off at like 0.02 and 0.03 these are two different values that have affect the appearance of the photograph and the best way I can describe it is just get in there and experiment with these values once we have everything all situated but for now we're just gonna leave it there we're also going to have result equals noise so when it comes to these filters I many of them you can say okay we're going to name the result of you know this processed image or whatever we're passing through we're going to call it result or noise rather in this case and then we can reference it in another filter as noise so you'll see how that works in a second we'll have also num octaves octaves I and I are making sure how you pronounce that I will have one again this is another value they experiment they can really change you know the higher the degree the height of the number two the crazier the the effect is and then I D we're gonna call this turbulence and we'll reference that and JavaScript alright for now let's just go ahead and leave it at that and then because I just want to show you what happens when we use just the turbulence alone on an image it looks crazy but I think what we'll do also I yeah I think we're good for now we're going to after that have a container for our images so first let's go ahead and rename that to overlay because I'm going to take this whole thing and I make a position:absolute to sit on top of her text and then I want a container so that we can use the grid property on our images so I'm going to go ahead and just paste copy and paste the images I'm trying to make my tutorial little bit faster these days I and that's good so we have all trees guitar and clip this is what these things are and then I class pick I don't think I actually use that I don't think I do so we could probably admit that anyway that's all we're going to be doing for the HTML so let's go to our CSS real quick I'm going to use a a real nice serif font from google fonts play fair display and body just some basic stuff here setting the margin zero height 100 100 viewport Heights position:relative come on Gary talk font family is gonna be play fair display alright next up after that I'm gonna go ahead and just breeze through the rest of these selectors because they're not pertinent like the HD one you're not here for the h1 you don't care about the h1 in your life right SVG though will do position:absolute we have our overlay that as well as position:absolute top:0 we have our container and the container is just a grid so display grid we have repeat three here on grid type of columns for a free graph our three pictures you know nothing exciting happening here and then the real important thing which is pertinent to the purpose of this tutorial is our image tag we want to give it a width real quickly of a hundred percent height I don't think we have to do the height sorry our filter has to be defined by giving this an ID right here so noise alright now I had a few other attributes in my and when I set this project up I'm not exactly sure if these are pertinent I should test that but we're gonna put them in there anyhow so what we do is you know at this point if I were to save this without having this filter we would see just the three images in a novice else in fact let's go ahead and open this with live server live servers and extension you can get that as you can see nothing greats happening here in terms of cool image effects what we want to do is give this a filter in in referenced using the URL function and then we put the ID of what did I call that noise okay noise now we save it and look at that now that's because we only have turbulence so this turbulence right here we want to use as a displacement map all right so what that will do is you'll be able to see the image but it's going to be distorted based on this turbulence effect that we have applied here so let's go back and add that oops get rid of that there we go alright so the next one is efi displacement map alright so in is an attribute where we can specify the source graphic so the source graphic in this case is going to be any of the image elements that have filter URL noise and then in to will be this right here so it's kind of compositing the source graphic with efi turbulence right here because we've said the result is noise and into each gonna be noise as well and then scale this is another attribute that you can play around with to see what it does we're setting it to 20 here so now if we save this look at that so it gives you a kind of interesting I I would say kind of stylistic effect to any graphics that you have applied to it with that filter property alright so basically now what we can do is with JavaScript we can animate these different properties to maybe only have an anime in when it looks crazy like this and then go to 0 so it looks like a normal identifiable picture so let's go ahead and do that so first we're going to use a G SAP which is the green sock animation platform I've done several tutorials and a small crash course on it so if you've never heard of what that is go ahead and check that out on my channel we're going to do a script source we're just going to link to a CDN of tween max-min cas right here and then we'll just do some JavaScript down here alright so what we'll do now is we want to get our element our turbulence ID which is right here this is the one that we're going to animate all right for the values by the way just to show you if we set these to zero obviously it affects nothing going back if we want to really make things crazier we can up these values like two three and seven and now there's just a lot more ripples and such occurring in here scale 20 try 50 here so as you can see I you can play around with these values and you can also animate them as you're gonna see shortly so we're gonna say let L as an element equals document dot get element by ID and that's going to be turbulence all right again that's in reference to this ID right here after that we're going to say we're gonna say a time line is new time line max we're gonna pass in pause true so it's not going to start win the document loads so now we can reference time line from and we're gonna start off with our h1 element so in the first parameter for time line for the G SAP time line is like the selector what you want to animate essentially next is going to be the duration and then we have an object here about what exactly properties you know what properties we want to animate this I think we'll say we're going to go from a 0% opacity so it's gonna hide it initially and then we'll say Y 50 all right so if we just come down here and say TL dot play we're gonna add more here in between we can see what this does because it just slowly moves up not very exciting okay so I next what we'll do is TL stagger from and we're gonna say pick alright so we are using that so stagger from or staggered there's also a stag or two there's also a two methods instead of from it all depends on how you want to animate things stagger will take multiple elements with the class name the same class name and I apply the same animation to them in a staggered form in a sequential idea so I we're just going to take these pictures and we're going to animate them in I've from the top left kind of so it'll be three seconds again what Pat C will be 0 X will be negative hundred Y will be negative 120 I don't know why I chose 127 100 whatever will give it a custom ease of power for ease out I you could check all the easing there's a cool little diagram they have at G SAP or green sock just type in G SAP easing and you'll find it's like the first link and it shows you demonstrations of all the different using types they have and then we're going to put here for a delay of 0.6 seconds and the third optional no fourth optional I parameter so let's just save that and see what happens so of course the turbulence and all that isn't animating simply because we haven't added that yet so we can also animate the attributes because we want to animate this attribute right here using timeline max so next is just to say T l2 and we're gonna say L and again element is to find right here turbulence so that's what we want to animate the SVG turbulence and we want to say this would be three duration we could pass it in in the object here acts for attr for attribute and then another object inside of here and then so you can animate the individual attributes that our new miracle at least like base frequency right here so we're gonna say 0 and then 0 all right because remember we're starting out with it already having turbulence and what do you want to turbulence to go away when it comes in alright so also over here at the end we're gonna have a delay of 3 there the reason to we're doing this is because I when we go from TL from I this would automatically play right away and so you have to when you're using green SAP and you're starting to learn is you're probably an experiment a lot trying to get the animation time to write in terms of setting up your delays right here I and these other values so this is what I came up with that tend to work you can also put negative delays by the way as well so let's just save that and there we go very very very cool stuff well look at it one more time awesome awesome stuff so alright there's a lot more you can do this with this I've seen other people I'll try to remember to link in the YouTube description some other examples of this turbulence effect being used in different ways there's some really cool examples out there like for instance when you're moving your mouse around the end the turbulence will animate with an image that's following the mouse and other cool stuff like that alright so hopefully you enjoyed that and you learn something new if you have other resources to check out SVG filters or even something you've done make sure to share it in the comments and also make sure to subscribe I'll see you guys real soon goodbye [Music] [Music]

Channel: DesignCourse

Views: 14,824

Keywords: svg, svg tutorial, svg filters, svg filters tutorial, svg filter tutorial, svg turbulence, feturbulence, svg displacementmap, svg displacement, fedisplacementmap, gsap svg, gsap svg tutorial, animating svg, svg animation, svg filters animation, gsap tutorial

Id: XYdDiZa_O3k

Length: 16min 59sec (1019 seconds)

Published: Tue Sep 17 2019