Building a Reusable Component that Animates on Scroll

today we are going to build a fun little unstyled component it's a fade up component and it lets you replace a div with Fade up and uh you can even add things like a delay so that once you scroll in anything that is in the viewport gets a nice little animation and we'll also come over to this little marketing template and see how well it works in kind of some more realistic code scenarios um it's a lot of fun and I think you're going to like it so let's go ahead and get started okay so to get started started let's just add a bit of

margin and I'll add a P tag with some lurm ipum and to fade this in uh we can turn this into a motion. div and uh let's go ahead and make this a client component so we can use frame motion and uh we can do something like initial opacity zero animate opacity

one and now when we refresh we see a little fade in animation here but of course we want this to happen when we scroll uh this paragraph into view so let's go ahead and add a little bit more content here I'll just wrap this in a div I'll drop a range here and let's just add 100 uh motion. div elements and I'll grab this we'll move the class name right here here for the margin and then we can

move our P tag in just like this so now we got a lot of text let's go ahead and add some space y4 or maybe eight and uh now we got a lot of content here and if I refresh uh we'll see it all kind of Fades in right away um but we want this to fade in when we scroll in and I know framer motion has a nice little use and view hook uh but this hook has State

tied to the component and since we have 100 paragraphs here we want that um separate Standalone component so each instance can have its own state so let's go ahead and make a fade up component and for now this will take in children which is going to be a react node and it will return children and let's go ahead and grab this motion div and we'll actually

return this put the children in right here we don't need a key on this anymore and we can go ahead and update this to fade up get rid of all this we'll keep the key and uh now we have just like before all of them fade in as soon as we uh refresh let's go ahead and actually just add a transition with duration of one

just so we can see this a little bit more clearly so there we see the fade but now we can add in use and view just like this so if we look at using view we see that it takes in a ref and it returns a Boolean so we're going to need a ref right here and we'll put that right up there we'll stick this on our ref and now we can pass this in and get is in view from there

this so uh we're getting a type error let's go ahead and default this to null I think that fixes that and uh now we have this cool little Boolean let's go ahead and bring up our console and let's just console.log is in view we're getting a bunch of falses but at the top we should get some trues and if I clear this and we scroll we see that we're getting this kind of reactive State already