SplitText paragraph line-height change on line split

[magnetic]

running SplitText.create for lines on an HTML paragraph seems to arbitrarily increase it's line-height - this doesn't occur with text outside <p> tags. removing all css produces the same result, so i'm pretty sure it's on SplitText's end. any help is greatly appreciated!

(for some reason the codepen preview doesn't seem to be working, here's the link: https://codepen.io/editor/paramagnetism/pen/019dcfab-76bc-73fb-90d5-adff145182d1)

See the Pen 019dcfab-76bc-73fb-90d5-adff145182d1 by editor (@editor) on CodePen.

[Rodrigo]

Hi @magnetic and welcome to the GSAP Forums!

 

Yeah because of the way SplitText works in order to correctly split nested elements this is the expected outcome. What you could do is wrap the text before the <p> tag in an extra <div> element and just split all the children of the text container:

<div id="text">
  <h1><u>Neapolitan ragù</u></h1>
  <div class="text-content">
    Neapolitan ragù (rraù in the Neapolitan language) is a ragù associated
    with the city of Naples, Italy, made by browning then braising meat
    over several hours in tomato purée and sauce. When the meat is ready,
    it is set aside and the sauce is left to continue cooking and
    thickening. In an Italian meal structure, Neapolitan ragù is served in
    two stages: first the majority of the sauce is served over pasta, then
    the meat is served alone or with vegetables, lightly dressed with the
    remaining sauce.
  </div>
  <p>
    Ragùs in general are rich, often meaty sauces that are eaten across
    Italy. The people of Naples hold their version in high regard, and
    several writers from the area describe it as the "queen of sauces". In
    other parts of Italy, the dish is known under names including ragù
    alla napoletana and ragù napoletano. Although it contains both tomato
    and meat, it is perceived as fundamentally a meat sauce, with the
    tomato as a conduit for meat flavors.
  </p>
</div>

Then just create a global array for all the lines inside of it and add them as you split each children:

const textParent = document.getElementById("text");

function getLines() {
  const lines = [];
  gsap.utils.toArray(textParent.children).forEach((c) => {
    const s = SplitText.create(c, {
      type: "lines",
      mask: "lines",
      linesClass: "line++",
    });
    lines.push(...s.lines);
  });
}

Here is a fork of your demo:

See the Pen gbLYRRQ by GreenSock (@GreenSock) on CodePen.

 

Finally I'm afraid that we can't embed the 2.0 version of codepen in the forums, so is better to stick to the classic codepen demos for now.

 

 

Hopefully this helps

Happy Tweening!

[magnetic]

2 hours ago, Rodrigo said:

Hi @magnetic and welcome to the GSAP Forums!

 

Yeah because of the way SplitText works in order to correctly split nested elements this is the expected outcome. What you could do is wrap the text before the <p> tag in an extra <div> element and just split all the children of the text container:

<div id="text">
  <h1><u>Neapolitan ragù</u></h1>
  <div class="text-content">
    Neapolitan ragù (rraù in the Neapolitan language) is a ragù associated
    with the city of Naples, Italy, made by browning then braising meat
    over several hours in tomato purée and sauce. When the meat is ready,
    it is set aside and the sauce is left to continue cooking and
    thickening. In an Italian meal structure, Neapolitan ragù is served in
    two stages: first the majority of the sauce is served over pasta, then
    the meat is served alone or with vegetables, lightly dressed with the
    remaining sauce.
  </div>
  <p>
    Ragùs in general are rich, often meaty sauces that are eaten across
    Italy. The people of Naples hold their version in high regard, and
    several writers from the area describe it as the "queen of sauces". In
    other parts of Italy, the dish is known under names including ragù
    alla napoletana and ragù napoletano. Although it contains both tomato
    and meat, it is perceived as fundamentally a meat sauce, with the
    tomato as a conduit for meat flavors.
  </p>
</div>

Then just create a global array for all the lines inside of it and add them as you split each children:

const textParent = document.getElementById("text");

function getLines() {
  const lines = [];
  gsap.utils.toArray(textParent.children).forEach((c) => {
    const s = SplitText.create(c, {
      type: "lines",
      mask: "lines",
      linesClass: "line++",
    });
    lines.push(...s.lines);
  });
}

Here is a fork of your demo:

 

 

 

Finally I'm afraid that we can't embed the 2.0 version of codepen in the forums, so is better to stick to the classic codepen demos for now.

 

 

Hopefully this helps

Happy Tweening!

that makes sense, thank you!