Jump to content
Search Community

SplitText animation

mattiasdominguez test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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
Link to comment
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?

Link to comment
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
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.
×
×
  • Create New...