On Scroll Animation in React | Animation in React 2022

hi everyone welcome to code with youtube channel in this video we will create uh animation in react uh page animation are unscroll animation uh so that will work like this okay whenever you are scrolling and the animation will work okay so we have a different type of animation paid i have it in paid outfit lift fade right also flip flip flip flipped right and zooming zoom out so these are the different types of animation that we will use in this video so let's get started before starting please subscribe our youtube channel so let's so here in react first of all we should install aos library um which is used for animation animation and school aos animation asking to install that so let's do that npm install aos you will install this so i have already installed it so after installing this uh we will come to the react component here first of all i will import that import aos from aos okay then also the css file import aos slash dust slash eos dot css okay after importing the importing this let's come just to write our code i will write a deal yota this is top view with us so also let's create videos class name animation okay and just come here and just duplicate this and also right here animation also first of all we will have the fade animation and also we will have the flip animation also one for zoom in yes we have these classes so now just let's make it to the center just we will give the size to these dues and i will make a text center i will use the css file to style these classes let's start local server in start after starting local silver yeah we have these so let's style our do these we will style it let's come here just write animation width for example 300 400 pixel height 80 pixel background color example ground okay and also the margin margin top and bottom will be 10 pixel and left and right will be auto auto to become in the center so let's set okay we have this so let's do something here just to come a little bit down it okay yes we have these now let's apply the animation on these so to apply animation on these let's make it ctrl d to select all animation class come here in so come here to the side data is is equal to so the first will be with as fade for example up it the second will be fed down and the third pet right the fourth fade lift also it will flip lift flip right flip up flip down for all of them click for example i will make it right and also zoom in zoom out zoom in up zoom in up down zoom down so you can use these classes for it zoom in yeah i will use the use effect to render the first time yes use effect and come here use the arrow function come here just this array is far to run at the first render whenever it first render it will run so now we will use here the os init function and here i will pass the duration duration is two thousand two millisecond okay let's run it what happen okay you saw this and then scroll you will see these other elimination classes okay i will just make it a little bit down to show the final one also okay you see these classes these are animations and scrolls okay we already you scroll so the animation will occur so it was all about the animation anyways so if you like the video please subscribe our youtube channel thanks for watching

Channel: Code With Yousaf

Views: 36,214

Keywords: animation on scroll, aos, scroll animation, page animation, animation in react, react animation, scroll down animation, animation, react js animation, libraries, aos react, css animation, js animation, code with yousaf, react animations, animation react, react transition

Id: 3yIFenltv0E

Length: 6min 12sec (372 seconds)

Published: Tue May 24 2022