Jump to content
Search Community

How to responsively reveal text controlling for line and letter

Chris Heuberger test
Moderator Tag

Go to solution Solved by Chris Heuberger,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...