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!

Share this post


Link to post
Share on other sites

Hey @hando,

 

Welcome to the GreenSock Forum.

 

Here two examples

 

See the Pen XBJRrr by mikeK (@mikeK) on CodePen

 

See the Pen pqQJyY by mikeK (@mikeK) on CodePen

 

Happy learning and tweening ...

Mikel

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Thanks Mikel thats great!

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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. 👴

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×