Framer Motion Animate When In View

bonjour and welcome to hopefully another enjoyable video now if you aren't familiar with framer motion i highly encourage you to watch the previous video because there we explained how to install frame emotion and we explained frame of motion in a nutshell alright that being said we are going to animate this whole container that we see here so this parent container and as you see this container has some child elements that we see here now if we go to the browser then we see that these are the child elements so this thumbnail here with the text and the one here and here are the child elements of this parent diff now we are going to animate this whole parent div right here and the first thing we need to do is input motion from framer motion and as you see here we already done that because we have done that in the previous video now the only thing we need to do now is we need to convert this to a motion component or a motion element like this so we place it in the opening tag and we do the same in the closing tag and now we have some extra super powers because now we can do all kinds of fancy things and the thing that we want to do is that we want to push this parentiff all the way to the left so we want to push it off the screen and then we want to let it slide in now not sure if this makes sense yet but i will show you in a bit what i mean with this and important to mention is that in the previous video we explained the x and y properties in framer motion now in this video we are going to use the x property to push this whole diff off the screen now to give a quick recap and if you want to know more details i suggest to watch the previous video but in frame of motion we can use x and y properties to move a motion component based on its current position and the x translates the element to the left when it is a negative number and to the right when it is a positive number and the y does it exactly the other way around so it translates the element to the top when it is a negative number and to the bottom when it is a positive number so as mentioned we will use the x property to push this whole element off the screen so what we can do is we can say initial equals and then we say x minus hundred and if we now go to the browser we see that it is pushed more to the left but maybe you don't see it that good so let's change this to 300 and then we see it's pushed more to the left but when we specify it like this it will use pixels as a default so this means that it pushes the element 300 pixels to the left based on its current position but we can also use other units than pixels for instance we can use the viewport width and the only thing we need to do then is that we need to place this inside quotes so we can say so this means push it 100 of the viewport width to the left and if we now go to the browser and we refresh it we see that it is pushed off the screen so it is completely gone and what we can then do is we can say we want this as a starting position and then we want to animate it to the original position so we can give this a value of zero so that means animate it to the original position as specified in the code so if we now go to the browser and we refresh it we see that this slides in now finally we can specify how the transition from start to end or in other words from initial to animate should happen so we can say transition and then let's give it a type of spring and a duration of one second and let's give it a little bit of bounce effect of 0.3 now if you now go to the browser and we refresh it we see this nice animation here however we do have a problem because normally of course you start at the top of the website so when we start here and we refresh the page and then we scroll down to the section we don't see the animation at all and this is because this animation here starts when the page loads and when we finally scroll down to this section here the animation is already finished now in this part of the video we are going to fix that so this animation here we want that it starts when it is in view so when we scroll down then we want that it starts right now all right now in order to fix that we need to manage the state in our component because we want to know if an element is in view and when that is the case we should trigger an animation now in order to manage this state we will use hooks and more specifically we will make use of three hooks and that will be the using view hook from the react intersection observer to use animation hook from framer motion and the use effect hook from react now if you have no idea what hooks are i would suggest to search for it on the web after this video of course because this will not be an in-depth hook tutorial alright let's now start with the first one and that is the use in view hook from the react intersection observer now according to the docs this is a react implementation of the intersection observer api to tell you when an element enters or leaves the viewport now this is exactly what we need so let's install this bad boy and therefore we simply copy this we go to the terminal and then we paste it in here and we press enter so if we now go to the packets.json so where is it packets.json then here we see that the react intersection observer is installed all right so let's close this and this all right now in order to monitor when an element is in view we need to apply the use in view hook from react intersection observer and the first thing we need to do is import this hook so we can import it like this use in view from and then react intersection observer the one here and now we can use this hook and therefore we can do use in view like this and then we will use object destructing so we can do const and then ref and here we do in view equals this here all right so what do we have here so this in view that you see here results in a boolean that specifies if an element is in view so true means that it is in view and false means of course that it is not in view now this ref property that you see here we need to assign that to the element that we want to monitor so in this case we want to monitor this parent div right here because inside this parent div we have our motion element or component that is pushed off the screen so if we want to monitor that we can say ref equals and then we say ref and now this here is monitored via this using view hook and when the div is in view it sets the in view boolean to true and when the div is not in view it sets it to false and this happens completely behind the scenes via the using view hook so we basically get this for free now then we can use the use effect hook from we react and of course we also need to import this so we can say import use effect from react all right now this use effect hook basically takes a parameter as a function so we can say use effect and then we give it a function from nothing to to console.log use effect hook in view is and then our view property i will explain this in a little bit so hang on all right so with this use effect hook that we see here we can tell react that our component needs to do something after it renders so how does this work well this function inside this use effect hook gets called every time that the component renders or in other words when the data or the state in our component changes now in addition this use in view hook that we see here changes the data in our components because this div here is monitored and when it is in view it sets this boolean here to true and when this div is not in view it sets this boolean here to false and this updates the data in our component and as a result our component re-renders and what then happens is that the function inside this use effect hook gets executed so let's open up developer tools let's go to the console and then let's remove this all right maybe i have to zoom this in a bit now let's refresh the page now the use effect hook is executed and it's set to false now when we scroll down and we reach this part here we see that it is set to true and when we go up we see it is set to false when we go down to true etc so what i previously explained we see that that is exactly happening now there is one final remark and that is that the use effect hook accepts another parameter of type array and in that array you can specify which data should be monitored so we can say in view and then this use effect hook monitors this in view boolean that we see here and when that one changes it executes the function inside this use effect hook so with this parameter here we can specify certain conditions all right now there's still one hook to use and that is the use animation hook from framer motion so of course we need to import that one also so let's do that here import use animation from framer motion so with this hook we can basically start and stop animations so in order to use it we can simply do const animation and we can give this any name we like and then use animation this is the hook and now comes the fun part because now we can combine this user view hook and this use animation hook inside this use effect hook so we now combine the three hooks together to get the result we want all right so what we can do is we can say if the parent div that we monitor here is in view then we want to start an animation and what we then want to do is that we want to use the x property with the value 0 so it should use the position of our motion element that we defined in the code and for the transition it should use the type spring the duration should take one second and it should apply a little bit of bounce effect all right now if the element is not in view then we want to start another animation so we do animation start and what we then want is that the motion element is placed completely off the screen so we can do minus hundred percent of the viewport width and let's place this here now and if we now go to the website and let's close developer tools and we refresh it then we see that this still doesn't do anything and that is of course because we now need to go to our motion element here and then we can remove this part here and this part here and then inside this animate props we give it our hook so that is this here this animation here and then we can say animation and if we now go to the website and we refresh it and when we now scroll down then we see that this element pops in when it is in view bam bam so that is exactly what we wanted now finally we still need a little bit of fine tuning because when we scroll down very slowly and we wait here for a little bit of time now we see that nothing happens so now we don't see any animation and that is because we monitor this parent div then this in view property is set to true and the animation of this motion component is started however this motion component is placed a bit more uh how do you say it a bit more to the bottom of this parent div so yeah if you scroll down through here and you wait here a little bit and then it is already executed so what we can do in order to fix this is that in the use in view hook we can specify a property so we can say threshold 0.2 and with this threshold we can specify a number between zero and one so a threshold of 0.2 means that 20 percent of this parent div here should be visible before it sets the in view boolean to true so if we scroll down through here and we wait here for a little bit for instance i take a zip of my t and if we now scroll down then we see that the animation still gets triggered and if we go up and below we see that it gets triggered again and again and again alright so that was it thank you for watching i appreciate it and see you in the next video

Channel: DEVAMS

Views: 10,916

Keywords: framer motion, framer motion tutorial, animation with framer motion, react animation tutorial, framer motion react, react framer motion, react motion tutorial, react animation, animation tutorial, react animations, react tutorial, js animations, react, css animation, animation, reactjs tutorial, how to animate react components, animate react components, react animations tutorial, animations in react, react framer, framer motion animation, framer x, framer loading animation

Id: hkhskSrT5SY

Length: 15min 11sec (911 seconds)

Published: Thu Mar 11 2021