Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
timdt

Text reveal animation

Recommended Posts

Hey guys, i was lookin on the forum and on the internet to finds something about a show/reveal text animation.

I want to draw a line in html and out of that line the text is revealed. almost like you lift a curtain and the text is revealed.

Looks very simulair like this. 

 

i tried to wrap a text element inside of a div with an overflow and then with gsap lift the div wich will reveal the text behind it.
Didnt get that to work unfortunately since the elements both move when i try it.

 

Any suggestions on how to achieve this?

Link to post
Share on other sites

You can simply hide it behind another div, or if it is svg then you can use mask. As for that line, keep line separate from the div so it won't reveal text.

  • Like 1
Link to post
Share on other sites

Cool effect.

 

If your background is a solid color, I would most likely go with Sahil's suggestion. Just create a div that hides the text and move it down, maybe even with a top border.

 

I took a stab at using clip-path. As the clip-path grows to reveal the text, I match the movement of a div that looks like a red line moving with it

 

See the Pen rGXOMp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I've only tested in Chrome, but hopefully these suggestions give you some idea.

I'd probably have to spend a few hours wrangling the CSS to make it flexible to accommodate any font-size or amount of text. Right now lots of values are hard-coded.

  • Like 4
Link to post
Share on other sites

UGH, sometimes the answer is much easier than expected. Another option is to just set overflow:hidden on the text div and adjust the height:

 

See the Pen eGqpyM?editors=0110 by GreenSock (@GreenSock) on CodePen

 

  • Like 3
  • Haha 1
Link to post
Share on other sites
Quote

 

@Carl Close almost what i meant. 

and yes it always is haha, u just need to know what tricks to use sometimes to get something done.
I already am much better thanks to you guys 

 

the line stays on the same position. and out of the line comes the text. 
Now u don't have a div to hide and show it with.

How is this accomplished?

Link to post
Share on other sites

Container is set to fixed height, text and line are set to absolute and with bottom property to zero. So now line stays at same position and text gets revealed.

 

See the Pen rGXxLR by Sahil89 (@Sahil89) on CodePen

 

  • Like 2
Link to post
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.

×