mdo

SplitText animation

Recommended Posts

New here so hi all! :)

 

I'm trying to animate these words in this sentence and would like to have the width of the sentence adjusted smoothly to the visible / animated word. All of the animated words should start at the same place. Don't know for sure if my explanation makes sense to what I'd like to accomplish. Any ideas on how to achieve this? I've added a codepen.

 

Thanks in advance!

Share this post


Link to post
Share on other sites

Hello @mdo and Welcome to the GreenSock Forum!

 

The issue is due to how the <span> element CSS display property works which defaults to inline, as well as how opacity works. Not to mention that the text is aligned to center.

 

So since your using opacity: 0 that will just fade out but the element will still take up the same about of space in the DOM. So i added the CSS property display: "none" in the tween which will automatically add the display: none property after opacity reaches 0. GSAP is smart enough to do that ;) I changed opacity with GSAP special property autoAlpha for better performance (See below for more info). Along with adding the CSS width property so it can be smoother. I also added autoRound: false so width can animate on a sub-pixel level instead of round whole numbers.

 

Of course there could be more done to try and animate the static non SplitText text separately and in sync with the SplitText text. But hopefully this all makes sense:

 

 

Keep in mind that i changed opacity to autoAlpha for better performance. See CSSPlugin Docs on what autoAlpha is.

 

https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha

  • autoAlpha:
    Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
    //fade out and set visibility:hidden
    TweenLite.to(element, 2, {autoAlpha:0});
     
    //in 2 seconds, fade back in with visibility:visible
    TweenLite.to(element, 2, {autoAlpha:1, delay:2});

 

Happy Tweening :)

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Thank you very much for these tips, very helpful to better understand the tweening!

Do you think it could be possible to have the width of the animated word(s) adjusted AFTER all the characters are tweened upwards? Cause now they're getting pushed together as the width per character decreases. Maybe as another chained animation on the tl?

Share this post


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