Create an Awesome Text Reveal Animation with GSAP

-- Today, I'm going to show you how to create a cool little text reveal animation that utilizes CSS clip-path, GSAP and a little JavaScript library called Split Type.

0:00 - Introduction
0:54 - Learn UI/UX Today
1:40 - Project Setup
2:18 - HTML and Initial CSS
4:28 - Integrating GSAP & Split Type
6:54 - GSAP JS Code
10:23 - Finishing up
12:37 - Final Project
13:23 - Conclusion

Let's get started!

#gsap #animation #frontend

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[design]

I’ve looked at a lot of videos and done a lot of training on GAP and your videos are very efficient and to the point. love it!

[AndreaRiezzo]

Essential and flawless: good tutorial! Thank you!

[jkbrodotdev]

couldnt you have done an overflow: hidden on the h1 instead of the clip path no?

[theriser]

I always used a parent div to do the mask thing with the text, but with clip-path is so much easier...

[sheridanlugo]

This tutorial is great, but I'm having an issue: when I apply my splittype it's getting rid of my css styling on my h1. Tried messing around with css inheritance but it's not fixing the issue :/

[Lwski]

Now how would you add scroll trigger to it??

[ricardoroukoz]

great tutorials man ... but i have a question the clip path u put is supposed to show all the text, then why in this case it's hiding it

[jean-baptistedioli]

Hello

Thanks for all the awesome video you're doing. Did you make video about Angular with GSAP ?

[varshigamer-ukln]

The same text can be possible on scroll means the text animation should do in the viewport

[bobesdrumskill_xVx]

Will this work for text inside an SVG?

[uephmyo]

Thank you! An alternative was to use gsap.from. The .char css then becomes useless.

[dhruv]

Can someone help me in animating the exit of the same text after 2 seconds? like text enters from bottom and exits to top

[nickjacobs]

@designcourse any reason you are using splittype rather than the gsap split text plug-in?

[johansapulete]

my office PC's desktop fan sound it's look like want to EXPLODE when i opened GSAP main website

[EyeIn_The_Sky]

very nice thank you! I f you wanted to animate the second name to use a different clip-path or transform: translateY to appear from a different direction, how would you target those elements for the second name since "splitType" utility slaps the "char" label on all the characters :/

[bahaedakka]

Nice one! But isn't it easier just to do it with CSS instead? Something like :nth-child(n)+nth-child(n+1) {animation with a delay here...}?

[Miki-motk]

except split text is a premium feature that costs $101 per year! :(

[--__--]

I'm having serious line height issue with this font family.

[AkinsRealm]

Your tutorials make me want to dive into some coding (yeah I love design more but still :), thank you Gary! I see there’s an “XD” indicator next to a folder icon at the footer/bottom bar of the vscode window, is that an XD plugin or..?

[nested]

Little tip guys don't just watch the video try to do it first then watch the solution