Jump to content
GreenSock

Jimmi Heiserman

SplitText and word wrap issues

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

Why does SplitText sometimes cause a reflow issue when it is running? I made a codepen with just the right amount of word lengths and width to trigger my bug. When I revert the split text back upon completion, the text snaps back to not having the last word broken apart incorrectly. Is there a solution to fix this word wrap issue without modifying my own HTML or CSS code? (Imagine this is dynamic and I would like every type of sentence inside this rectangular div to not jump or break sporadically when it animates.)

 

I have read about using more than just chars as the split type but any combination of chars, words, or lines for type doesn't seem to help me here.

See the Pen MBPeMw by jimmi_heiserman (@jimmi_heiserman) on CodePen

Link to comment
Share on other sites

That's due to how browsers handle text and inline-block elements. When you use SplitText, all text characters get split into div tags with their display set to inline-block so browser treats them as individual block. And if you use words as well to split, they are split into div tag and contain all the individual characters but an inline-block can't have more than 100% width.

 

When you use revert method your text gets treated as block of words and text usually gets wrapped if it it can be wrapped or overflows the container. Check the following demo, to see how different length words get wrapped. I don't know what could be solution apart from ensuring that your words aren't longer than or equally wide as the container.

 

See the Pen gjBLEm?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Hello @Jimmi Heiserman

 

To add to @Sahil great advise...

 

This is a CSS issue and not a GSAP SplitText issue. GSAP is doing what its supposed to do. ;)

 

This is happening due to the CSS Box Model, specifically the red border (border: red solid 1px;) you have on your #message element. That border is adding to the fixed width of the content, that is why the letter "g" goes to the next line.

 

So to fix this issue, you have 4 options:

  1. add the CSS box-sizing: border-box to your #message CSS rule
  2. or add CSS box-sizing: border-box to your GSAP code using the set() method
  3. or remove the border from the #message CSS rule
  4. or increase your CSS width by 2px , making it width: 99px to account for the border (border-left and border right) that is affecting the box-model

You can solve this by just adding the CSS property box-sizing so it does not include the border in the box model:

 

#message {
  box-sizing: border-box;
}

 

If you don't want to add to your CSS , then add the CSS box-sizing property in your tween with the set() method:

 

TweenMax.set(element, {"box-sizing":"border-box"});

 

You see how its fixed by removing the red border fixing the box model.

 

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

 

Using set() method to add box-sizing:

 

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

 

Or adding box-sizing to your #message CSS rule

 

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

 

Happy Tweening :)

 

Resources:

CSS Box Model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

CSS box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

 

  • Like 2
Link to comment
Share on other sites

Another 5th option is to add the following:

 

#message div {
  white-space: nowrap;
}

 

It looks like the child div tags of #message are inheriting the CSS white-space property (from the browser stylesheet), which has the white-space property default of normal which always wraps.

 

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

 

Hope this helps :)

 

Resources:

CSS white-space property: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

  • Like 4
Link to comment
Share on other sites

The all-knowing Oracle of CSS never disappoints. Well done Sir @Jonathan ?

  • Like 3
Link to comment
Share on other sites

@Jonathan Strangely all three demos behave same as OP's demo on windows in both Chrome and Firefox. Only your demo with 'white-space' works as solution.

 

Quote

The all-knowing Oracle of CSS never disappoints. Well done Sir @Jonathan ?

 

We all are like Human Browsers at different levels. @GreenSock and @OSUblake(with Canvas) are 100% Human Browsers. @Jonathan is 100% Human Browser with all cross browser support plus he comes with quirk modes as well.

 

  • Like 2
  • Haha 4
Link to comment
Share on other sites

@Sahil that's weird.. I did notice that the first 3 codpens solved the box model layout fit of the text before and after the animation is reverted. But @Carlshowed me that once the nested div's are inserted and reverted, the "g" went back to the same line. 

 

My quirks mode has been a little buggy so i should have caught that sooner :)

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