SplitText, PIN and display: flex parent – Line Breaks

[Asored]

Hi! I try to understand an issue which currently occurs for a pinned animation in combination with SplitText and display: flex parent containers.

 

As you can see in the pen, SplitText seems not to render this string correctly when the text element (in this case h1) has a parent element with display: flex (in this case .container). It splits the text into two lines.

 

Changing the parent to display: block, the rendering is fine and the headline remains one line. This would be the expected (or desired) behavior. This error only appears while the PIN functionality is activated.

 

Is there a common way to handle with such situations?

See the Pen dyqbmrj by asored (@asored) on CodePen

[Rodrigo]

Hi,

 

The issue is that the flex container limits the width of the h1 because of the pin feature. What you can do is set it's width to 100% and that will keep it in a single line:

h1 {
  font-size: 45px;
  width: 100%;
}
.container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
}

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!