Create an Awesome Text Reveal Animation with GSAP

[@DesignCourse]

Hey all, this Monday (October 3) is the 2 week early access period to my nee interactive CSS course! designcourse.com/css

[@namusanganicholas9206]

which software are you using for the annotations during the tutorial?

[@517design]

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!

[@botwhipified1828]

Essentially flawless hair

[@TheProfessorMA]

good tutorial! Thank you!

[@jkbrodotdev]

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

[@alanmurray4011]

Yes, that would’ve make a lot more sense.

[@Lwski01]

Now how would you add scroll trigger to it??

[@theriser8751]

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

[@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-baptistedioli1692]

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

[@cryptopiafanai8916]

how do you do this in react?

[@drumskillbobe]

Will this work for text inside an SVG?

[@varshigamer-uk8ln]

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

[@johansapulete]

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

[@mr.magnificent5520]

when i am increasing the size of the text the mask is not positioned properly why ?

[@sonamohialdin3376]

Very good tutorial

[@nickjacobs1752]

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

[@ayurtsybenov]

Because GSAP SplitText is a paid plugin

[@nv3796]

Liked and Subscribed !!

[@uzersayed3530]

what vscode theme do you use ?

[@TK-uo7cb]

good shit thank you my guy

[@sheridanlugo8967]

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 :/

[@humayoonnazer5737]

i have the same issue, did you find a fix?

[@dhruv12698]

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

[@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...}?

[@DesignCourse]

I think I mention somewhere in the tutorial that I'm using GSAP here because presumably if this were a full project, you'd benefit greatly by all of the other features and time saving techniques that GSAP offers.

[@kristijanpirkovic9594]

How about the delay? You would use nth-child to calculate the delay? Doing it manually would be big time waster

[@bahaedakka]

@@kristijanpirkovic9594 use variables

[@klaus117gaming]

Why do you like pain 😪

[@godwinebikwo6544]

@@bahaedakka please could you reproduce on codepen?

[@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 :/

[@michaelhofby]

target the ones you want with a more specific css selector i would guess. Like a pseudo selector

[@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..?

[@trebaltek]

i recently dropped all adobe products after years of use, ill tell you was the best decision ive ever made, adobe hindered my creativity, before dropping them i stumbled on threejs, react three fiber, gsap and theatrejs which will allow you to import custom 3d designs from blender3d which is also free and allow you to build websites in 3d environments.. man your design skills will pass anyone who designs sites using adobe products,. you can get much better functionality and cooler app like threejs than youll ever get paying for a subscription with creative cloud. diving fully into javascript and typescript has totally upped my game. and i dont have to pay one dime. also Vscode was made before XD . il tell you start with learning the programs mentioned above and below you'll be excited every morning to learning java and typescript so you can use these amazing programs xd has nothing on and .

[@trebaltek]

best part all open source. need vectors use inkscape, need photo shop edits use gimp, need 3d renders or models use blender3d , need websites use vscode and threejs or react three fiber than you can integrate the gsap plugins easily.

[@AkinsRealm]

@Trebaltek Recs Thank you for mentioning your thoughts and hints about 3D assets. I do like using Adobe CC products since I like the ecosystem and apps' integration also they pretty much set the standards in the industry and I see some benefits of that while applying to jobs. But it also comes to personal preferences. I haven't been coding for a long while but vscode is my go to tool when I need to edit some html/css, UI related code etc. It might be made before XD but it doesn't change the fact that there might be some plugins for some integration/quickly getting some design aspects to css etc. Thank you for your reply again :)

[@trebaltek]

i hate when yt deletes comments of people just helping other people. but im sure you still see my comment in your notifications

[@trebaltek]

​@@AkinsRealm strange you tagged @UCmoOilpjgciY57JrIdoOPlA is that what my name looks like to you? thats not even my handle.lolol weird

[@charlesxavier77]

How can I change the default class?

[@charlesxavier77]

Oh, like so: const greetingFormula = new SplitType('#greetingFormula', { types: 'chars', charClass: 'greetingText', });

[@hariskhanzada7507]

@@charlesxavier77 Thankyou so much brother.

[@-0-__-0-]

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

[@muzammilsyed2339]

Splitype alternative for Reactjs?

[@vladyslavnechytailo2586]

Put it in useEffect useEffect(() => { const title = document.querySelector("#mytext"); const myText = new SplitType(title) gsap.to(".char", { y: 0, opacity: 1, duration: 1, stagger: 0.05, delay: 0.2, }); })

[@euvenbeucht6413]

@@vladyslavnechytailo2586 Thank you! Somehow my "char" class is not getting its properties. Could you please give me a hint how to write the css classes?

[@Miki-mo7tk]

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

[@devoxygen7395]

After long time with coding

[@DesignCourse]

Expect more in 2023!

[@wardanjukovs2884]

why ur looking your 2 monitor a lot

[@DesignCourse]

It's a reference code monitor. You wouldn't want me to wing live coding, it's never buttery smooth for anyone.

[@wardanjukovs2884]

@@DesignCourse I got u

[@CarterMarshall-p3r]

Caroline Mountains

[@TaimoorShahzada]

first😅

[@djordySchenkeveld]

second!

[@eyujunior9991]

third

[@nested9301]

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

[@petsoni]

I'm really frustrated about the fact that no one is pointing out that he is just looking up some code in his other monitor and then just rewriting it in the main monitor so you can follow along... Why is it a tutorial if you are just blatantly "copying" code? The content is amazing, don't get me wrong, but imagine a professor looking at his notebook the whole lesson just so he can teach the students something that he didn't even learn... You are just better of making a post on Reddit or CodePen and everyone can just copy the same code as you and not even bother watching the 10-20 minute videos... Very bad practice!!!

[@teixeira2764]

it's probably his code tho

[@Artist01222]

I saw that too but it doesn't mean to me much. It is just a way of earning money🤑

[@namusanganicholas9206]

you should show us how tutorials should really be made, Mr. Bad Practice. ohhh... wait, there aren't on your channel, very bad practice

[@guts190]

Hes just showing how to use It and explaining us the process. I learned and that works for me. Dont know what you criticize so much, its only a KZbin video, hes not your personal teacher.

[@nickjacobs1752]

It just shows he’s actually done some prep and made sure the code works before filming the vid…

[@DidierGirard-w7k]

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

[@webbae]

Yo I just posted the same thing yesterday but as a gsap.from() animation! haha great minds think alike 🧠 I see this reveal effect everywhere these days.

[@Artist01222]

Your tut was much more helpful..