The Coolest Animated SVG Filter Effect

recently I stumbled across this awesome use of an SVG turbulence filter and figured I'd try to apply it to my own project typically this type of effect is usually only achievable with webgl but this is surprisingly easy to integrate in a number of different use cases through SVG So today we're going to build this example from scratch with the help of gsap so let's get started if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy alright so the very first thing that we have going on here I have a index.html which is almost empty we have a section here and then a section class of content we're going to Target this and put the uh the SVG turbulence thing in along with a few other things like the unordered list for the content that will overlap on the SVG element so I'm also I'm referencing a CSS main.css file that's right here I'm using SAS for this so I'm watching it with a live SAS compiler you could just use straight up CSS it doesn't matter really this isn't like a crazy complex example and as of course you can see it's basically empty at this point so if I right click open with live server we're going to see just a big old white page in a second right here all right so um the first thing I guess we'll start with is I'm going to get out um we're just going to put in the unordered list first and then we'll worry about the SVG stuff after so the unordered list is actually pretty simple I'm just going to start by copying some content for a second we're just going to put an unordered list here and then I'm going to describe each list item real quickly so we have a list item right here we have a link inside of it and then we also have three elements we have the um Ford Trends right here that's just to say the title of the project this is kind of like a portfolio section or something we have a paragraph with a class of date and then we have a div class a border which you'll see how that comes in effect so that we can easily animate that we could use a sudo before or after element but it makes a little bit easier just to put it in the HTML itself okay um with that said all this is is just I'm repeating this with unique uh content about like five or six more times so I'm just going to paste that in there here is our unordered list now if I go back to our SAS file I'm gonna get some just quick boilerplate code going here so I'm just using a I'm setting a body rule set here uh margin zero height 100 viewport height we're using Roberto condensed so with that said that's a Google font I'm going to copy and paste that right here by the way you can grab the eye all the source code for this in the top link or the second link in the YouTube description below I'm going to save that and then we're going to go ahead and I'm going to focus specifically we're going to do section we're just going to do height 100 viewport height so now when we save this it's going to be blank but if we scroll down we're going to see this stuff right there all right now additionally we're also going to specify just some stuff for the unordered list and honestly because this tutorial really isn't about the unordered list I'm just going to go ahead and paste in it's quite likely the rule set but essentially we're going to have an unordered list right here we're doing a bunch of stuff to kind of Center it and all that good stuff the list item a because there are two columns we use in display Flex you can go through this if you wish I am doing just some slight hover based animations over here you can go through this again it's not pertinent pertinent to the purpose of this tutorial but if I scroll down you're not going to see anything the reason is because I'm hiding this stuff by default so I'm hiding the border with scale x0 for transform and I'm also hiding the transform and translate uh or I'm hiding the Span in the date element um which is the title um would Translate Y negative 180 you might be wondering why 180 well if I don't do if I do maybe just 100 you're gonna see what happens uh we could still see it like that so I had to push it up a little bit further with 180 and that gets it clearly off the screen and we're going to use gstap to bring that stuff back in okay so now let's go ahead and switch gears and we're going to go to figma you don't necessarily need to use figma for this I just need an SVG kind of just starter point and so all I'm going to do with basically a desktop frame here I'm just going to hit R for the rectangle tool left click it drag like this right click and we're going to go ahead and copy as actually let's change the uh the appearance for a second maybe it's something like kind of like a bright green uh something like this maybe desaturate a little bit okay that's fine so now we can right click while selecting it copy as SVG okay so now what we're going to do is we're going to paste that SVG information right there and of course if we save this we're going to see this okay now we have to make some adjustments to it in order to make it responsive and all that good stuff so first off I'm going to go ahead and remove the width and height attribute and we're going to leave the view box in the fill but we're going to get rid of the xmlns attribute we don't need that and then we do need to use the preserve aspect ratio attribute all right so if I put that right there this right here this stuff I the X mid y Min slice it's real difficult to kind of describe this so I'm not going to go into this but basically it's kind of a their settings essentially that allow you to control how the elements found within the SVG element um are being rastered in terms of their aspect ratio I found that this one here worked pretty well I would do a Google search on preserve aspect ratio or ask chat topt kind of how it works if you want a better explanation okay enough of that so when we save this now and we look at this I we could see that it's basically responsive like that okay so moving on now what we're going to do is we're going to Define some definitions we're going to use the definition attribute So Def all right and something tells me this is kind of strange why is that white because it's not white on my reference code I hope I didn't screw oh it's because it's okay def's plural okay I am an idiot all right so what we want to do now is we're going to create a filter all right this is going to be the turbulence filter and then also a mask are going to go inside of the definitions I element so the first one I'm just going to copy and paste this again you can I'm going to hit Ctrl B here so the filter ID is called displacement filter you can name this whatever you want and then we have Fe turbulence and Fe displacement map type is fractal noise bass frequency num octaves these two elements right here if you adjust their values you will greatly adjust the effect all right so hopefully that makes sense um right here you don't have to worry about this line the displacement map at all for now um so once we have that we're going to go ahead also and Define a mask all right so I'm going to go ahead and paste that and the mask is right here called Circle mask it's an ID attribute and then we have a circle inside of here and this is defining the actual mask itself so I made the position these are positions so X and Y it's 600 and 800 you can play around with these values as well the RV value is the radius so if it's zero we're not going to see it so if I put in 300 I we will see it but we still have a little bit of work to do to tie this all together with direct element itself so to do that what we want to do is I specify a width a height and a mask attribute onto this element so if I paste those in we have a width of 100 a height of 100 and we have the mask as URL Circle mask right here now before we get into looking what this looking looking at what this looks like which right now it looks like this there's nothing crazy going on um let's real quickly specify a couple things here so first notice we have a displacement class right here this is a class displacement so we want to make a rule set that basically says displacement filter is displacement filter right there now the filter is right here so it's kind of tying those two together I in this rule set right here so we're adding the filter on the displacement I Circle right here with the class and this is giving that it's applying this filter to this mask or not this mask but really the circle inside of the Mask so if we save that and we come back now look at that you can see this weird kind of you know crazy stuff it's it just looks weird right so it looks especially cool though when we go to start animating it now in the CSS we're going to do a couple other things we're going to Target the SVG element and that's simply a width of 100 a height of 100 view percent position absolute Z index negative one so that it'll sit behind our uh our graphic or our you know the type that's there which is currently hidden by the way so after that um let's see if we have anything else to worry about um yes we want to put position relative in the section element because we're going to have a couple position absolute elements in there there we go we got rid of the stuff at the bottom and looking at that uh that looks like pretty much all we need to do for the uh for the SAS or the CSS for the tutorial so now we're going to come down here and we're going to get stuff integrated and working with gstap and JavaScript so the first thing I want to do which is not gsap is I like to integrate lennis which is a smooth scroll so if you type lennis l-e-n-i-s smooth scroll in Google you'll find more about it I've done a video dedicated to it just do a channel search but basically just gives you a nice smooth scroll which I like to do and integrate in these type of interactive experiences so we're going to put script here and this is where our JavaScript code is going to go and then we also have to import uh greenstock animation platform and the associated scroll trigger so those two script tags are right here now again if you need quick access to that just type in gstap 3 CDN top result is cdnjs and you just need the top one right here gsap.min.js and also scroll trigger right here and copy the script tag so those are the two things that I pasted there all right so now that we have that we want to register the scroll trigger plugin so gsap register scroll trigger register plug-in scroll trigger rather and then we're going to go ahead and set up oh and before we do that let's get our smooth scroll stuff boilerplate um smooth scroll all right so this code right here all comes from let's just save that that all comes from if I type in lennis GitHub it comes from their getting started information so for instance right here is exact same code this is the basic setup you copy this script tag you're ready to rock with smooth scroll in fact if I do this there you go you can see it's a nice smooth scroll there okay now let's switch uh focuses here to Green stock animation platform so first we're going to say let timeline or TL uh we're going to bind that to timeline and we're going to open up the object and then so give us the scroll trigger so we're going to make a couple adjustments here and the first one is going to be the trigger our trigger we're going to make it this particular section the second one with classic content so to put that selector in there we're going to specify I dot content the start of this is going to be top top now I just literally did a video two days ago that describes what's happening in scroll trigger this what what start does and what n does real short I basically it means that the top of the target element which would be content and the this means in this the second value right here simply means the top of I where we're defining the scroll trigger in relation to the viewport so it's the top of the viewport the end is the bottom of the trigger element which is content and the scroll trigger is set to the top as well you have to play around with these values and they're dynamic because they can also accept you know percentage values and negative values and all that stuff please watch my video from yesterday or the two days ago rather to understand kind of what's Happening Here Right Now I have got scrubs set to true you're going to see the difference when we I screw around with that I because we tie the animations to the cursor position if this is set to True otherwise it's just going to play based on a Time duration that you can specify when these trigger elements occur so I'm actually going to set this to false um pin right here this will also affect the behavior it'll kind of do a position fixed on the target element when it's in place so again just experiment to see if you want to set that to true or true or false anticipate pen is another property I think we're going to leave that off I and we'll experiment with that as well if we need to so let's go ahead and just save that now we have the scroll trigger defined and now we can take our timeline and we can start animating different things so for instance um let's say two we're going to say displacement this is our first Target for animation and we want to animate the attribute value of R so let's go find displacement which is this right here we want to animate this r value right now it said it's 300 but we're going to make it Zero by default because we want it to grow and then get large so we're starting from zero and in order to to animate the attribute value you have to open up the attribute object and then we say R because that's the name of the actual attribute value and we're going to say 700. okay we can also give it an explicit duration especially if we are using scrub false so we're going to say two all right so let's save this it's probably going to look a little it probably won't work exactly how we wanted to but actually yes it does I'm a liar it's almost we do kind of want it to repeat so that's where we use toggle actions by the way to understand what's happening here um with your start and end values we're going to say marker I don't know so I'm so I'm simple markers true there we go all right so when we do markers you can kind of see in the upper right corner the scroll start and scroll n where they start and then the start and end value based on the element that we targeted so it can kind of help you figure out what's happening in a visual sort of sense with these labels you don't have to use them you can just kind of comment it out if you want but that's just a quick tip toggle actions is the I and again I covered this in that other video it just basically allows you to control when scrub false is checked and you're tying the animation to do so a duration rather than scroll position it allows you to control what's happening at different stages of when the element is in view based based on the scroll position so we're just going to leave play 999 but we're gonna say reverse that reverse is going to do this so let's let's refresh I'm going to scroll down we're going to see it come into place and then when I scroll back out you're gonna see it shrinks back that's where the reverse is occurring so that way if a person is scrolling and they they scroll down and up a few times they're going to get to see that that effect occur again so that's the power of scroll trigger right here it's very powerful I love it and yeah that's that so there's a few other things we need to do we can chain to our timeline method uh so we could just say dot two let's do that as well let's uh kind of get this all situated nicely there we go another thing that we're going to chain in here is going to be the span element and the paragraph element so to do that we simply just um put you you comma separate the selectors and then inside of here is where we animate the things that we want to animate simply put remember in the CSS we were doing transform Translate Y negative 180 I think it was so now we just want to set the Y to zero all right and then we also because there's multiple of these span elements and paragraph graph elements there's like six or seven of them in that list we can put a stagger on it as well which will create at a point zero uh Point wait 0.1 uh second duration it's going to stagger those in so that they don't all come at the same time it's a stylistic preference you don't have to do it if you don't want to um and then we're going to also make this start with an offset of negative I let's do two seconds so these these two things will happen at the same time otherwise if you don't put this value here it'll start after this stuff has finished for a duration of two seconds so you can time your chained animations as such so let's see what happens so far Let's uh scroll down let's scroll down right here there we go all right pretty good so far we also have that little border I want to kind of animate in afterwards so we're going to say two and we're going to say border it's a class right there it's just the div element with border we're going to say scale X one all right because we're using transform uh let's see scale yeah let's find Border transform scale X zero okay so now we're just going to set that to one and then stagger is going to be 0.1 as well and then we're going to make this also start at a negative 2. so let's save that let's go back let's scroll down let's scroll here and there we go all right we're getting close and I'll show you by the way how to change this to an image that it reveals as well which is very cool um and that's basically it uh in that regard so that's yeah that's all the HTML are in the JavaScript essentially that we need so you're probably wondering okay so we have a solid color here and again I want to show you real quick before we proceed how to play around with these values so um essentially like let's change num octaves to like from one to three what does that do all right so it kind of makes it a little bit more grainy in a sense I mean we can really exaggerate it and like put it up to 10 and see what that does all right so it just kind of defines it has a lot more ripples all right so let's back up that's one let's set this like at one and see what that does all right so if I get out my zoom tool real quick uh Zoom it there we go and I I show you what's happening here look how fine that is all right so if you want something that's like really smooth how about 0.01 look at that it's really just a smooth sort of shape so it's it's all depends on what you want stylistically for this to work so let's also go ahead and let's change this rectangle into an actual image element which is very cool so I'm going to take this element here and I'm just going to um comment that out with control forward slash and I'm going to paste in an actual image element that is going to allow us to choose whatever image we want to mask and it could make it actually way extra cool depending on the image that you use so in my reference monitor I'm going to go ahead and grab that HTML real quickly and then just paste it in so that HTML looks like this it's image here let's move this over here image style transform is translate x negative 20 I did put this here inline CSS just to kind of position the image itself you may have to do this for it to look well in the context of your project now we're also using this href which is just referencing literally an unsplash image that I found that works well we have a width of 100 a height of 100 and then same thing as the wrecked version I we're setting the mask URL Circle mask which is in ref reference to this mask ID here this has the same thing so if we say this and go back look at that so you might be wondering what does this picture actually what does that actually look like as an image and if we just go ahead and copy us and paste that let's go over here there you go I'll show you what that image looks like it's just it's just a square image that looks like this and that's what we're revealing so if I go to unsplash real quick and I choose another light photo because we have text sitting on top of it that is dark and I'll just type in light photograph or a light photo or something like that I let me find one that might work pretty well for our use case again I don't want to take forever here um perhaps I'll just grab let's grab this one I'm going to right click copy image address and then just paste that in right there we'll save it go back refresh now that doesn't look as cool because again it's not positioned correctly that's why I use that transform I'm right here translate x negative 20. so you may have to reposition it based on the dimensions and the aspect ratio of the image but here's our original and I think it looks really really cool it looks and works really well as well when we're on a large monitor like this awesome awesome stuff if you enjoyed this and you want to learn more about this kind of stuff definitely check out designcores.com the UI ux course the CSS course and the upcoming Advanced front ends course where we really tackle stuff like green stock animation platforms some 3js and just really awesome interactive websites so that's going to be coming up later this year in 2023 enter your email to be notified when that releases and I will see you all soon goodbye

Channel: DesignCourse

Views: 25,901

Keywords: svg turbulence, svg filter, svg filter effect, animated svg, svg animation, gary simon, designcourse, svg filter animation, animated svg filter

Id: Nd70iyFT1r8

Length: 24min 12sec (1452 seconds)

Published: Thu Jul 20 2023