Text reveal animation

[timdt]

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?

[Sahil]

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.

[Carl]

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.

[Carl]

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.

 

[timdt]

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?

[Sahil]

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.

 

[Carl]

@Sahil, sweet!

[PointC]

Here's an SVG version just to give you some options.

 

See the Pen zEgvge by PointC (@PointC) on CodePen.

Happy tweening.

[timdt]

@Sahil Nice ! This is what i meant . awesome

[timdt]

@PointC very nice!