Text animation

[hando 2 Likes (Newbie)]

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!

[mikel 4,774 Likes (Superhero)]

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

 

 

[hando 2 Likes (Newbie)]

Thanks Mikel thats great!

[ZachSaucier 7,129 Likes (Superhero)]

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

[PointC 14,181 Likes (Superhero)]

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.

[ZachSaucier 7,129 Likes (Superhero)]

@PointC Who needs SVG for that?

 

See the Pen ZgKbgW by GreenSock (@GreenSock) on CodePen

 

[PointC 14,181 Likes (Superhero)]

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

[ZachSaucier 7,129 Likes (Superhero)]

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.

[PointC 14,181 Likes (Superhero)]

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. 

 

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

[lorenzo.gasperoni 0 Likes (Newbie)]

I think @PointC solution is better for most situations (and mine) because doesn't need a full color background, and can be used also on a photo or on other complex elements.

 

Thanks to everyone!

[Aamir Khan 0 Likes (Newbie)]

On 7/30/2019 at 10:16 PM, PointC said:

 

I have svg and in that svg, I have text element and I have given some id to that tag element. Then how can I apply this effect to my text in svg. Please help

 

 

 

Happy tweening.

 

[GSAP Helper 89 Likes (Contributor)]

@Aamir Khan, it's pretty tough to troubleshoot without a minimal demo - would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored elements and the GSAP code is best (avoid frameworks if possible). 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. It's usually good to start a new thread rather than hijacking a 2 year old one, by the way.

[Aamir Khan 0 Likes (Newbie)]

9 hours ago, GSAP Helper said:

@Aamir Khan, it's pretty tough to troubleshoot without a minimal demo - would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored elements and the GSAP code is best (avoid frameworks if possible). 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

avove is the link of my codepen. I have svg and I want to animate the text of that svg using id of text element. How can I apply fade up character effect on my text.

 

 

9 hours ago, GSAP Helper said:

 

 

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. It's usually good to start a new thread rather than hijacking a 2 year old one, by the way.

 

[Aamir Khan 0 Likes (Newbie)]

See the Pen WNKjyQP by khanaamir (@khanaamir) on CodePen

This is the link of my codepen.

[GSAP Helper 89 Likes (Contributor)]

You didn't save any of your changes - you just linked to our empty starter template Make sure you click the "fork" button in the bottom right on CodePen and then make your changes and save them. Copy that [new] URL and paste it here. But actually, it would be much better for you to just start a NEW thread in the forums, please. You're hijacking a thread that's several years old. So all previous posters are getting notifications.