Jump to content
GreenSock

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

animated text challenge

Recommended Posts

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

Link to comment
Share on other sites

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! :)

 

  • Like 2
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

:)

 

  • Like 3
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

Thanks for letting me know. I really appreciate it! 

Link to comment
Share on other sites

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! 

 

  • Like 2
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.
×