Scroll Triggered Animation in React with Framer Motion

hi everyone welcome back to framer motion tutorial in previous videos we talked about and we created more examples like text animation enter in the exact animation drag animation and also each over and click animation and other example we created in framer Motion in this video we will create trigger scroll animation okay let's create something like this so I have already installed framework motion using npm npm install framer motion and I have created a file by scroll animation trigger and I imported it in index page okay you put it here so now I will start recording here react functional component export and let's import also the motion import motion from framework motion and first of all I will style add some styles to this video okay CC Style I will write it I wrote this thesis Styles in this development and here I will write an edge to type react scroll animation with the framer motion okay and now I will hit the Box okay I will create a component for that function box so let's return some a div and you will get and I will add um some styles to this okay and also this is our animated element okay we would like to animate this box so we should add motion before this video okay and now what we should do I will just write some Styles CCS styles for this so I will write the Styles then I will I will pause the video I wrote some CC stars to this margin with heart and also the background so now I will add the animation so first the initial initial start the initial start we should have the opacity should be 0 and also the scale and now scale yes SK should be zero whenever we would like to animate so why sorry Ctrl sit while in view whenever it is in view so then we should change the opacity to one and also scale to one and now we will add the transition [Music] transition add the duration to the transition the duration would be for example zero point sex okay so first we will check it I have already started the server the local server so let's see it I didn't import the Box okay this box should be imported here I will import this and I should write three boxes now let's check it again we don't have that and we have the the margin width height and also background everything is okay let's check it so we have it let's see the animation okay if you would like to animate it just once so we will add a viewport here viewfort is equal to and once true okay it is true with us so now whenever it animate for the first time then we cannot see again okay see it yeah and you mix it for the first time later we cannot see it is not animating now okay just once it has animated so it was the property of viewport and the ones let's commit it and also if you would like for example it start from 500 like X 500 pixel and here we never that is in view then we will change that back to zero so let's check it now see it it will come from the right side okay okay see you can add you can play with this whatever you would like so you can add that so it was all about scroll animation and reactors using framer motion framework so if you like the video please subscribe to our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 7,385

Keywords: framer motion, react animation, react animation tutorial, framer motion tutorial, framer motion react, animation with framer motion, react animations, react framer motion, animation in react, framer motion animation, react js scroll animation, react motion tutorial, animation on scroll, animating react with framer motion, scroll animation, react js parlour animation website with framer motion, react framer motion scroll, react motion, animation, scroll animation in react

Id: z6AENkwq1jM

Length: 5min 38sec (338 seconds)

Published: Thu Jan 26 2023