Intersection Observer - Scroll Animation - Quick Tutorial!

hello hello welcome to front end strats we're going to be going over a recipe on how to create an on-scroll opacity and moving up motion using the intersection observer this is going to be pretty quick and dirty so if you want any more details you can check out the mdn which gives a lot of a lot of those details uh if you like this please like and subscribe we'll be best friends we'll hang out all the time or never whatever you want okay cool let's jump in so we have a boilerplate set up with a fade in div and some css we're going to add a few more of these fade in divs here cool and the only thing to note in our html really is we have this class fade in which we're going to be using in our css and javascript you can name it whatever you want but yeah so now in our css what we're going to do is under our boilerplate we're just going to give this an opacity of zero and if you don't want to do the opacity you just want to do a transform or vice versa you know do this to taste but we're going to use the translate y property to move these down 40 percent and then we're going to add a transition property and we're going to use the shorthand here so we grab both the opacity and the transform properties but do whatever you want we have a one second on that we could probably make it shorter but for this we'll do that and then we'll give it an ease out and oh we put this on the body needs to go on the fade in okay so yeah that should be under the fade in class and then we're going to create this active class selector and we're going to add a little css there and we're going to basically kind of set this to the default where it was so put that to zero so the transform goes to zero and the opacity goes to one and that'll pretty much be our setup for the css then if we want to go to our javascripts in order to use the intersection observer constructor what we're going to have to do is we're going to give this a call back and some options so first what we'll do is we'll select our elements here and we'll use query selector all for that and we're going to select all of these fade in classes then we'll move on to creating our options object and pretty sure this is the default value for uh the root but basically what this does is it'll set what scrolling area we're talking about and this will just make it a little bit more explicit then we're going to set root margin which will affect when the intersection observer is triggered for the value i'm just going to give it zero pixels which again i think is probably the default but you know just to have it in there uh and the only thing that could trip you up here is if you just add a zero like in your normal css it won't work so you need to be explicit about you know the measurement unit i'm just going to use pixels here but you know you probably could use something else um like a percent or what not and then we're going to give it a threshold for how far down into the element our viewport can reach before we trigger this callback and i'm going to set this to 0.4 check out whatever error we got here unexpected token all right so this needs to be no okay weird all right so now we're going to create our callback and our callback is going to take it's gonna get past this entries array and for each div that we register each element we register we're gonna have an entry object so what we're gonna do is we're gonna iterate over these entries and we're going to check if the entry is intersecting and if it is we're going to do what we want to do in this case is add a class very exciting very cool so we're going to create a condition here we're going to say if the entry is intersecting then and it's important to do this because i'm pretty sure intersection observer runs on load or at odd times so you want to just make sure that it is intersecting when you add this class so you don't ruin your effect so now we're going to use the classlist add method to add the class active and you can do two v's if you're cool but that won't work but you'll feel pretty cool about it so now that we have our options and our callback what we're gonna have to do is we're ready to create our observer so we're going to use our intersection observer which we get for free and we're going to pass it our callback in our options then we need to register which elements we are observing so what we'll do is we'll iterate over our elements array and for each of these we're going to tell our observer to observe observer.observe and we'll give it the element and now do we have an error unexpected string i think codepen might be yeah codepen was just being fun and now what we're doing is we're getting this if you want to see the default of this you can see here we're having these active classes applied and voila cool so if you have any questions please leave them below i'll try to answer any that come up and like and subscribe if this helps you and again you know best friends offers always available and uh yeah try with us more about these all right have a good one bye

Channel: Frontend Strats

Views: 237

Keywords:

Id: ANkvtCaYjWA

Length: 6min 41sec (401 seconds)

Published: Fri Jul 02 2021