animated text challenge

[ericshew]

Hi there,

 

I'm trying to use greensock to recreate an effect I see everywhere. Here is an example of it. http://www.jennyjohannesson.com/klm I'm referring to how the Bluey text and body appears on the portfolio page. I would like to have the text appear from the baseline. I can re-create this effect using a wrapper with visible set to off but ideally I would not use a wrapper. It seems like there should be a straightforward way of pulling this off but I'm not sure how to do it. 

 

Thanks in advance for your help. 

 

See the Pen LedOpa by ericshew (@ericshew) on CodePen.

[Jonathan]

Hello @ericshew

 

On that example they are animating SVG. So you should use the GSAP MorphSVGPlugin.

 

https://greensock.com/morphSVG

 

https://greensock.com/docs/Plugins/MorphSVGPlugin

 

if you have a codepen example please post it above so we can see your code in context.

 

In the below codepen, even though the shapes of animals are morphed, it is the same concept with shapes of SVG text or letters:

 

See the Pen rOjeRq by GreenSock (@GreenSock) on CodePen.

 

 

Happy Tweening!

 

[ericshew]

It's not the initial text I'm referring to, it's the body copy and title linked wtih the portfolio - which is all live text. 

[PointC]

Are you referring to the morph at the beginning or that text that appears from nowhere?

 

If it's the morph, @Jonathan's info should take care of it for you. If it's the text appearing from nowhere, I'd do it exactly like they do on the website. Put the text in a div and set the overflow to hidden. You would also have the option of using a mask or clip-path, but in any case, you have to hide it behind something.

 

Happy tweening.

 

[ericshew]

I'm referring to the non morphing text... in my codepen I created two examples. One with a div and one without. I'm hoping for a soution that doesn't require an outside DIV or other dom manipulation. It sounds like that isn't possible. 

[Sahil]

Here is what you want. In this particular case you can just make overflow hidden on h1 tags. Another way would be to use opacity 0 but it won't have that clipping effect. Otherwise wrapper is necessary.

 

In your HTML you are using some weird spaces around id, kind of unnecessary.  Also, not complaining but on codepen you have one cool feature to use, personally I love using it because it makes your code really readable. TidyJS, TidyCSS, TidyHTML under each panel, just try using it sometime you will love it too.

 

See the Pen RxMxQj?editors=1010 by Sahil89 (@Sahil89) on CodePen.

 

[Jonathan]

The only other way to do that without an outside div with overflow:hidden; is to use a clip-path, or use pseudo-elements :before or :after. Which would only require one element but give you more than one element in the rendered page via generated content. But in my opinion for full cross browser its best to have a wrapper due to not all browsers behaving correctly with pseudo-elements.

[ericshew]

Thanks for letting me know. I really appreciate it! 

[ericshew]

11 hours ago, Sahil said:

Here is what you want. In this particular case you can just make overflow hidden on h1 tags. Another way would be to use opacity 0 but it won't have that clipping effect. Otherwise wrapper is necessary.

 

In your HTML you are using some weird spaces around id, kind of unnecessary.  Also, not complaining but on codepen you have one cool feature to use, personally I love using it because it makes your code really readable. TidyJS, TidyCSS, TidyHTML under each panel, just try using it sometime you will love it too.

 

See the Pen RxMxQj?editors=1010 by Sahil89 (@Sahil89) on CodePen.

 

 

Thanks Sahil. Even though the code didn't achieve the intended effect I still learned a few pointers from it.  The code cleanup frunction was new to me as well. Thanks very much for sharing!