Staggered Text Animations with React and Framer Motion

I call this animation or any variant of this animation a zup don't ask me why it just feels like a zo I spent maybe 20 minutes on the awards hover animations list and found I mean a hundred different versions of it so apparently if you want to be a super cool award-winning web developer guy you better know how to do this Advanced effect I'm using react tail1 CSS and frame or motion source code and other fun stuff in the description okay let's do it really quick before we look at code let's take just a second to think about how this is going to work so it's a very basic example maybe we have some kind of Link text like this with a little arrow and what you'll often see is that the arrow is kind of hidden until you actually hover over the text and then it slides into place the kind of tricky part about this though is that as it slides in there isn't some kind of opacity transform or something that was hiding it it just kind of looks like it's appearing out of thin air now the way that this works is a very very simple trick and you can see that if you imagine first that this little red box that I've got here is a wrapping container that has a overflow of hidden on it this way whenever you actually transform your arrow outside of this box the box is still in the same place place but because it has an overflow of hidden you can't actually see the element anymore this way when it slides in it looks like it's kind of clipping from outside of this box same thing if you want some kind of exit animation and you can kind of just keep layering on top of this idea so maybe you have something that looks more like this you have some kind of text like this which is inside some overflow container made up by this blue box in the background and whenever you hover over this it actually slides the text up but inserts a copy of that same text that was layered below it you can even go as far as kind of breaking this up into individual characters so maybe that looks instead something like this and then whenever you hover over the container you stagger these animations so first you kind of start transforming up the S and then you transform up the O and it gives you this kind of wavy effect where just one letter at a time is actually sliding into place like that now that is exactly the effect that we're going to build today hopefully you understand the basic principle of this idea let's jump into some code to start us off I've got a basic component set up here called reveal links it's just taking up the height of the screen placing everything in the center giving it a display of grid little bit of Gap to go between all of our elements some padding text black basic stuff and then of course because this is an awards website we need a really really bright background color so you could go with green or pink or lime or really whatever color you want but I'm just going to stick with that original green color now I want to start off by just rendering a couple of our links here so I'll make a new component I'm going to call that flip link like this flip link is going to take in the children prop as well as an HF for our link and both of those are just going to be strings if you're using typescript and for right now we can just have this return an a tag make sure that we pass in our href and then make sure we pass in our children and now we can just go in and drop a couple of links in here so I'll have a link for Twitter one for LinkedIn whatever we want and then just some basic #h for right now if we save that we should now see that we have our links here in the middle of the screen let's style these up a little bit I'll open up my class names like this and start by giving this a position of relative we'll see why in just a second give it a display of block as well as an overflow of hidden we we'll play around with this a little bit in a second but this a tag is going to be our overflow hidden container that we were talking about just a second ago a white space of no wrap because this text is going to be really big and if it does happen to go off the side of the screen I just don't want it to wrap the letters around that'll make a little more sense in a second I'll give it a text of 4XL a font weight of black which is 900 make sure that everything is uppercased and then I'm going to give it some different text sizes based on the break point these all are just based on the font that I'm using of course adjust these for your own font and now we should have something that looks like this now it's a very basic example of how animations work whenever we're using frame or motion we can come up here to the top and import the motion component from framer motion so I'll say import motion from framer motion and then down here on my anchor tag I'm going to instead of an a tag here I'll turn this into a motion. a with frameware motion we can prend any of our normal HTML elements with motion and this is going to supercharge our Elements by giving us some additional props that we can use for animating our element so by example what we could say is maybe for our initial State we want a y transform of zero so whenever we're not actually hovering this or animating it we don't want to actually transform it at all but while we're hovering it we might want to animate it so maybe wellever we're hovering this we want to have a y transform of say 20 something like that and just to give us a little basic example here I can now hover over any of these links and we'll see them kind of move around now one issue you might notice is if I hover right up here at the very top top of it it kind of bugs out a little bit and that's because since we're transforming this on the Y AIS it's actually moving the element out of the way whenever you hover it right up here at the top so what we can do to actually fix this issue is inside of my children prop right here I'll actually remove that and create a div right here and then render my children inside of that div actually we don't want a normal div we'll do a motion. div for right now and then I'm going to replace my initial right here with a string that says initial you can name this actually whatever you want and instead of my well hovered I'll just say hovered again you can call this whatever you want because now we're going to come down to our div right here and we're going to open up one more prop called variants and inside of variants we can actually take these These are going to be keys to different sets of styles that we want to animate on this element so by example my initial will have a y transform of zero and my hovered right here will have our y transform of say 20 now we should see that if I hover up here at the top it doesn't bug out anymore and we'll actually start to see this being clipped off down here at the very bottom which is what we're going for right you might be able to see this a little bit more clearly if I come up here and add a background color so let's say BG white for our links and now as I hover over this we'll see that it starts to clip out of the bottom of our element here instead of doing my y transform of 20 here I'm actually going to replace this with a minus 100% and this is going to fully transform the element off of the top of the element so now whenever I hover over this it completely moves the text outside of the box box now you might be able to see where we're starting to go with this I can actually add another one of these divs absolutely position that to this wrapping element and then transform that in in place of this existing element so to show you what I mean I'm going to copy this entire motion div right here and paste another version of it down here in the class names for this element I'll give it a position of absolute and an inset of zero then I'll actually take my initial state right here and I'll turn that into a 100% transform that will move it out of the bottom of my element and whenever we actually hover this I want to then move that to zero so now whenever I hover over one of these elements we should see that the existing text swipes away and the hidden text actually swipes into to fill its space I'm going to go ahead and remove my background white right here just to show this kind of cleared up now as I move between all of my elements we have this little zo effect now I'm going to take one step back from this because right now we're actually animating our entire div here and what I want to do is I want to animate each individual letter and then kind of stagger those letters you will have seen that the examples that I showed at the beginning of this video so what we're actually going to do is for all of these different motion divs here we're going to remove the motion dot we can then also remove our variance and we can start by just splitting our text remember that our children prop all make up a string so in order to render out each individual character as its own element I will call do split split on just an empty string like this and then I can map over each of my elements pulling out the letter as well as the index and then just to show that nothing changed we can just return a span tag this span tag can render our letter and then remember to add a key which can just be our index I'm going to copy paste all of this and replace it for my other children prop right here and it should really look like nothing has changed right now unless we come down and we start inspecting our elements we should now see that each individual letter is being rendered with its own span tag we'll of course also notice that for each one of our individual a tags we have two separate divs that have the exact same content in them just layered directly on top of each other so now we can start animating each of these letters individually to give us that kind of wavy effect now the way that we're going to do this is very similar to the way that we just animated the entire div so I'll come to all of my span tags right here and turn them all into motion. spans remembering our variant props from just a second ago we can go ahead and drop those in the variants for my top spans are each going to have an initial state of a y transform of zero transforming to a y transform of minus 100% just like we had on our divs just a second ago and again just like we had on our bottom span just a second ago give us a little bit more room here we will start with an initial transform of 100% And then whenever hovered transform to zero now if you come over and you actually try to hover over one of your elements you're going to notice that it's not actually working just yet and that's because spans are inline elements so we're going to need to turn these into inline block elements if we want to transform them on the Y AIS so just for all of our spans We'll add a class name of inline block both for these spans up here as well as these ones down here and now whenever we go and actually hover over our elements we should see something that looks similar to what we had when we had just our divs a second ago now in order to start staggering these letters One path that we could go would be something like this so I could come up to my motion a tag up here and add a prop called transition and now if I start typing in stagger children I could actually Define the Stagger on the parent like this so I could say you know 0.2 seconds or something like that but what you're going to see is that this is going to stagger all of our elements and what I mean by that is it's going to go one letter at a time so it's not actually going to animate both of our T's then both of our W's then both of our I's it's going to go all the way through all of our first elements and then use our second Elements which at least for me is not exactly what I want so I'm going to remove this transition prop right here and I'm going to come down to my spans and what we're going to do instead is open up the transition prop on our spans and we're going to add an animation delay to each of these and we'll just base that off of our index so maybe for our delay we want let's say again 0.2 seconds just to keep it slow we can take that and then multiply that by our current index as we map through all of our elements copy paste that full transition right there come down to our other span and drop that here as well and this will keep all of our elements in line like that now this really is the base of this entire effect but I do want to kind of clean it up a little bit and I'm going to start by coming up here above my element right here above my component and I'm going to Define just two quick variables up here one for duration that's going to be the duration of each animation as well as the Stagger this is how long we want to stagger between each of our elements and then I'm going to update my transition props down here I'll just come to this first one we can remove that and instead I'll drop in something like this so for our duration I want to use that duration that I defined above for my easing I'll go with ease in out and for my delay I'll go with our stagger again just times the index and then we can use this exact same configuration down here for this transition and this should give us a much smoother animation one final little thing that I want to do to touch this up which we'll notice if I come back to my wrapping a tag and give this a background color again we'll say something like BG white is that because of the line height that we have set on our text here there's a lot of room up here at the top and the bottom of our text and we can fix that by just updating our line height manually now because I'm using tail and CSS it can be a little bit annoying to actually Define my line height whenever I am using responsive break points because you have to update it for each responsive breakpoint so instead I'm just going to use an inline style tag right here here on my a tag and I'll give this a line height of I think something like 0.75 and you can kind of just play around with this until it looks good so we'll see 0.85 still has a little bit of room 0.75 that looks good enough for me now going back and removing my background white right here we should see that this really tightened up our animation now that's going to be it for this one today guys again all of the code is down in the description both in JavaScript as well as in typescript if you learned anything I would massively appreciate a like and a subscribe beyond that I'll see you guys next time peace

Channel: Tom Is Loading

Views: 10,530

Keywords: tailwindcss, tailwind css full course, web development, javascript animations, awwwards

Id: blUpQMJjObE

Length: 11min 58sec (718 seconds)

Published: Tue Jun 18 2024