make word appear letter by letter

[archimedo]

Hi everyone, I'd like to make a word appear letter by letter, like this https://brunoarizio.com/work/area-g/

where the letters from the word 'Area G' appears sequentially and form the word. The thing is that when they appear, letters seems to have already 100% opacity, and it's like they're coming up from an invisible div.

Can this effect be achieved with GSAP? which way would you reccomend me to follow?

Thank you so much!

[Carl]

Hi, This effect was literally the most recent lesson I added to my GreenSock course bundle.

 

To split the text and animate character by character I would suggest SplitText.

To make the text appear that it is coming from an invisible div as you said the trick is to give the parent div overflow:hidden in the css.

 

Below is the demo from the lesson. Feel free to pull it apart

See the Pen XWjZMgJ by snorkltv (@snorkltv) on CodePen

 

You probably want to pay attention to what is happening to the "h2" and  ".tagline"

 

Change the yPercent value to 100 (positive) to see text coming in from bottom

 

.from(taglineSplit.words, {yPercent:-100, stagger:0.05, duration:0.3})

 

I teach how to use SplitText in the free course listed below in my signature