Custom Link Animations with Framer Motion in React | Tutorial

hey guys in this video I wanted to go over how I recreated this simple animation that looks really nice using frame remotion in react so to start I wanted to give a nice overview of how this animation actually works in order to make it more clear and easier to follow so for this animation to work we actually clone the text here what we do and we have another what we do I'm just using the same links as they do as you can see there is a div that houses both of these pieces of text however one is position absolutely this will appear down here now when the user hovers over the link this piece of text will go up and this one will come in and take its place and that's how it works and then whenever you hover out of it it comes back right into place lastly in order to make this look like it's flowing like kind of smoothly and like spin to it you actually need to animate each letter one by one individually and give it a little delay between each letter oh and one last thing I forgot to mention that once we have that animation going we can do an overflow hidden on this div and it will hide the piece of text that was underneath so it won't be in view okay so let's begin okay so here I have a file called animated link which basically we're going to create a wrapper that will take in whichever piece of text we want to animate and give it the nice animation so here we have an export default function right now it's just div with animated link but first what we want to create is the parser so we'll create a function that will parse each word and then for each word it will parse each letter that way we can animate each letter in the word to get the nice effect that I was talking about so let's call this animated word and it's going to be a function that's going to take in the title will be an arrow function so the span will be the word and we want to map through the title which is the string of letters and we want to split this on each space meaning every word and then we'll map through each character and give an index here we have to check if the character is actually a space okay so here we're gonna split the title which is the tag in an array by the spaces now we have to check if there is a space and if there is a space we actually need a return a span tag of this symbol which represents a space of course we have to give this a key as well now if it's not a space then we will return each word in a spin okay so again what we're doing here is just taking each word in the text blending it by a space looping through each character in the array and if it's a space then we use this symbol which represents a space else we wrap the character each letter in a span in order for this to work we actually need to give these some class names so this will be relative inline block and then white space no wrap that way the text won't wrap down I actually put this into the wrong one apologies and now for the word we actually need to give this another white space Dash no wrap and a relative okay so now that we have these words parsed by each character now we can come here to the actual component and then we pass in animated word here we can pass in the title and this will be title and we will take in title and I forgot to close this like that now like I said we need a clone of the of the link that way we can position this one absolutely and it will come into place to do this we will have to give this a position a class name of relative and an overflow hidden actually I'm Gonna Keep it off just to show and a cursor pointer since this will be the link now let's come to our page so here what I'm doing I'm looping through the array of nav links which have an object of each link which has a title and in a truck here and I'll just passing in a regular link and positioning this one absolutely to show the demonstration so now what we're going to do instead of using a link component actually going to pass in the animated link component and we're going to pass in the title as the link dot title like that and we don't need this Flex okay so as you can see we have this piece of text taking up an extra space inside of the div so to fix that all we have to do is create a div here as in the second piece of text give this a class name of absolute and a top of zero now it appears that it's gone but it's actually on top of this other word but we will fix that with the animation okay now for the animations the fun part okay let's start by animating the letters so we will give this spanned emotion and this comes from framer motion okay so we have to use client with frame or motion okay so for the variance each animated piece of text will have a different animation property because one will start at the bottom and will go up and then the other one will start here and then go up so we can start by creating our animation variants so cons letter animation and then this will equal an object and we will give it a rest animation of Y zero so it will start at its original spot and then when it's hovered over we want to change this to y25 so this will be negative 25 because it will hover up instead of going down then I will just copy this for the second animation so let's just call this two this will actually start 25 and it will come to a y of zero when it's hovered now we have to specify a transition and a duration this will be 0.3 and an ease function and I have this function that I found that works best for this animation also we'll have to give it a type which is just an animation type and this will make it instead of bouncy because usually with frame of motion all animations are like by default like springy and bouncy so the type tween uh should make it like a little stiff and let's give these same properties to the other animation now here for this span we will give this a variant of animation and we will pass this in as prop so for this one we'll just give an animation of letter animation then for the second one we will give this animation of letter animation two now nothing's happening so this is because we have to animate the parent element first in order to see any animation so here we will actually create a variant for the parent let's call this title animation when it's at rest when it's not hovered we will give this a transition of staggered children I found that this number works really nice same for the hovered property here we're just gonna change this to hover so whenever it's hovered these letters will stagger let's pass in the variance of title animation and then we can give this an initial of rest and and animate of hover okay so now if we refresh the page we should see an animation and as you can see the first piece of text goes from inside of the box outside and yeah it's a nice little simple animation but right now it's just happening on refresh and basically whenever the page reloads in order to do this on Hover we will have to give the parent div emotion property so framework motion has this while hover property but after many hours of debugging it turns out it doesn't work with the specific animation and you actually have to do a little work around it just took me a while to actually figure this out but what you want to use is on Mouse enter and on Mouse leave these two will receive a callback function we actually need to Define some State here let's just call this state is hovered and set is hover set hovered here we'll just give this false at the beginning and we'll have to import this use state from react so we will use state in order to determine if the div is being hovered over since while hover doesn't work this little on Mouse enter will receive a callback function that will set is hovered to true because if the mouse entered then it's true and here on Mouse leave we need a set hovered to false okay simple as that and now we have our hovered State working okay so now what we want to do is actually pass in this state variable into our components in order to let them know when they should animate so it's hovered it's going to be equal to is hovered so now that we have this state here we can receive it as a prop it's hovered what we can do is pass in is hovered and check if it is then we want to hover else if it's not hovered if it's false then we want to rest okay so now whenever we hover over the div it animates both of our texts so now we see they're duplicated this is a Sim let's do like I said overflow and then hidden okay so I removed the border and gave this a bigger text size but it is important to note that whenever you change the size of text you'll have to change the Y position so since I gave it a bigger text size I will increase this to 30 that way we give it more space between the letters and as you can see it works really nicely and it it looks just like this and now you can adjust the duration the speed of these animations the ease functions in order to fit your needs but I think this is pretty close to what this animation is like so if you want more dramatic effect on the Tilt you can increase this staggering effect here and this should give you like a more dramatic wobbly effect but like personally I don't like this so I'll just revert this back to the three so feel free to play around with the code I'll leave it down in the description it's in my website so if you want to check that out go ahead and mess around implement it into your website I'll also leave a link down below to the website that I got inspired from and feel free to leave a comment if you have any animation you want me to try out and make a video on and I'll be sure to post it but yeah other than that thanks for watching and I'll see you later

Channel: Diego Cabrera

Views: 4,586

Keywords:

Id: Q6lnIvf9FQg

Length: 13min 5sec (785 seconds)

Published: Sun Jul 02 2023