Jump to content
Search Community

Text reveal animation

timdt test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 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...