Jump to content
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!

See the Pen xmyxdJ by mdominguez (@mdominguez) on CodePen

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:

 

See the Pen JwmYxz by jonathan (@jonathan) on CodePen

 

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 4
  • 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

Its a little tricky to have width and or scaleX be added after the words go up since those properties are whats used to animate the non animated text (.c-intro-title__fixed-part) to stay centered. What you want, would require me to re-layout how the markup and initial CSS is so it can use other ways to animate the centered text so its responsive. But when i have more time i can try and do that but im a little strapped for time right now.

 

If it was me, I would first work out the auto centering animation of the h1.c-intro-title element. And then once that auto centers, work on animating its children with SplitText. Since the <h1> element is what needs to be animated to account for its children's width due to how you want to have no width or scaleX applied, until after the SplitText animates the y property (translateY).

 

:)

  • Like 1

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.