TailwindCSS Text Reveal Animation

hey what's going on guys in this video I want to show you how to create a really cool text reveal effect using green stock and Tailwind CSS so you can see here in front of us if we load this page we get this cool text reveal effect it says awesome sauce because animations are awesome so let's go ahead and jump into it and I'll show you how simple it is to create these text reveal animations okay let me show you how simple it is to create that text reveal animation using Tailwind CSS and the green sock Library I'm going to open up my code editor I'm using visual studio code and I'm going to create a blank HTML document so let's give this a title of Tailwind CSS text reveal animation and I do have a snippet and what the snippet does is it basically adds a container with a full width a full height of the screen and then we Center the content and then we have an H1 element with an ID of text and it has some large text and it's also bold as well if I were to view this in the browser you can see that we have the awesome sauce here but it's actually not using the Tailwind CSS Library so we need to include the CDN in our project foreign you can see now that the Tailwind CSS classes have been applied looks a little bit nicer next we need to break each of these characters into their own element so I'm going to do that using a library called split type so if you just search for split type JS that should be the first result and instead of installing this with npm I want to add the CDN link so I can just search for CDN simple enough I can copy this and pop that in the head of the document next I am going to add some JavaScript to the bottom of the page and I'm going to create a new variable call this text and I want this to have a new split type and I need to pass the ID which is text so if I save that and go back to the page and reload this it looks exactly the same but if we open up the developer tools we can see inside of this div and inside of the H1 every single line is broken up into its own div every word is broken up into its own div and every character is inside of its own div element so what we're going to do is we are going to Loop through each of these characters and we want to apply the Tailwind class of Translate Y full so we want to kind of have it sit a little bit lower on the y-axis and that's pretty simple let's go ahead and get all the characters with a simple document query selector all then we want to Loop through each of the characters and we want to apply that Translate Y full class to each of the elements okay and if we jump back over to our page let's close out the developer tools and reload you can now see that the text sits quite a bit lower on the y-axis and then we are going to include the green sock library to animate each of these characters up so head on over to greensock.com make sure to go through their tutorials their documentation it's very well put together I'm surprised that it's taken me this long to get into this animation library because it is super super cool so heading over to the docs I'm going to go to the installation section and we can install this by including a CDN link and then you can also install a lot of their plugins a lot of them I will probably be creating a video later on down the road because they are just super duper cool so the next step is we want to animate each of these characters or each of these divs from this specific location to another location so I know that the method that I want to use inside of the gsap library is the gsap 2 method these are the three most common methods for creating an animation tween which is gsap.2 from and from 2. so we are going to animate a specific element to a specific state so we can apply the Y position scale position opacity and any other kind of CSS property that we want to apply to it let's go ahead and do that now so inside of this object we are going to specify the properties that we want to animate this element to so we're going to say that we want this to go to a y position of zero and we also want to stagger the animation so I'll say 0.05 and we also want to have a little delay in between the animations so we'll say delay 0.02 and we want the duration to be half a second okay we'll save that go back to our page and reload and check it out it was that simple to create a cool animation that just makes the user experience so much better so the final step that we probably want to do is we want to have a CSS clip path so that way we don't see the text when it is at the starting position go ahead and Google CSS clip path and we just need to get a simple polygon shape so this should do we have triangle we have all these different shapes we basically just need a square so we'll select that trapezoid and we'll move it over and let's copy this and just add this as an inline Style so we'll say style equals and we'll paste that in now going back to the document let's reload and check it out how cool is that we've just added a simple animation using Tailwind CSS and green sock and you can see that these animations will really make one page stand out over another and it's super easy to create these animations with green sock I definitely recommend just checking out their website and all their documentation as I said I will probably be creating more videos on how we can integrate tailwind and greensock together to create some awesome animations thanks for watching and I hope to see you in a future video

Channel: devdojo

Views: 23,309

Keywords:

Id: hfbfIfbBR4s

Length: 6min 40sec (400 seconds)

Published: Fri Nov 18 2022