How to responsively reveal text controlling for line and letter

[Chris Heuberger]

Hi all,

 

I have a working prototype using GSAP SplitText (displayed at the bottom of this post) which stagger-reveals a title, by changing position and opacity of each letter individually.

 

What I'd like to do is mimic the text reveal animation here: http://loveforiceland.com/ which animates each line simultaneously while still stagger-revealing each letter. And the way the letters are revealed are by moving up from behind a kind of mask instead of fading in by animating the letter's opacity. This example gets close:

See the Pen qBqMPQp by camcgreen (@camcgreen) on CodePen.

but reveals each line as a whole instead of letter-by-letter.

 

Additional requirements:
 1. <a> tags be preserved in the title (as they are in my prototype)
 2. The title must be responsive which I imagine means the initial markup can't be grouped by line since line breaks will depend on screen width.

 

Is this possible with GSAP?

 

Thanks!

See the Pen PopbXRd by ChrisBup (@ChrisBup) on CodePen.

[Carl]

this is a demo that accompanies one of the lessons from courses, perhaps it will help

 

See the Pen PomzGPN by snorkltv (@snorkltv) on CodePen.

[Chris Heuberger]

Oh thanks @Carl ! That is very helpful.

[Chris Heuberger]

Applying some insight from Carl's demo, I think I have my solution: 

See the Pen qBPJRyz by ChrisBup (@ChrisBup) on CodePen.

 

While not strictly responsive, I used breakpoints to at least make it adaptive by specifying hard-coded markup versions of the title based on screen width which allows me to group and control the title by line as well as letter.

[Carl]

Great job. thx for posting your results.