Jump to content
GreenSock

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

Text animation

Recommended Posts

Hi guys, 

New to the forum and to Greensock. I've only started learning it over the past week or so.

I came across this text animation on the link below, where the text transforms up but it looks like it comes from behind a hidden element.

 

Would anyone know how to recreate this or could point me in the direction of some materials where I could find out how to do it myself?

 

https://likely-story.co.uk/

 

Thanks in advance!

Link to comment
Share on other sites

Thanks Mikel thats great!

Link to comment
Share on other sites

Hey hando and welcome to the forums! 

 

The key, as seen in mikel's demos, is generally using CSS' overflow: hidden property which you can read more about here

 

If you need to reveal it in a more fancy way than just a rectangle, it'd require using something like clip-path, either in CSS (which has less browser support) or SVG (more support but still not perfect for older browsers). 

  • Like 2
Link to comment
Share on other sites

If you wanna get fancy you could also use a SVG mask with a gradient resulting in a nice feathered edge.

 

See the Pen EqmxZV by PointC (@PointC) on CodePen

 

Happy tweening.

  • Like 4
Link to comment
Share on other sites

48 minutes ago, ZachSaucier said:

@PointC Who needs SVG for that? ;)

 

I do so it will scale perfectly. I'm old with a thick skull so I need things that are simple. ?

Link to comment
Share on other sites

3 minutes ago, PointC said:

I do so it will scale perfectly.

 

What do you mean? My approach is based on the font size, which you can set to be based on the window width if you'd like.

Link to comment
Share on other sites

Zach is getting clever today. ;) 

 

My stuff is usually part of a larger SVG. I can't work too much with CSS because it scares me. :D

 

Yours also isn't working correctly on my iPad. It's drifting off the right side of the window for some reason.

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