Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Rodrigo

SplitText removes sibling image.

Go to solution Solved by Carl,

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

Hi Guys,

 

Quick question.

 

I noticed that using SplitText, if the <div> element being passed to the SplitText tool, has an image or any other tag inside, that tag is changed into an empty <div> by the SplitText tool. Is this by design?.

<div class="content" id="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam elementum enim tincidunt suscipit a et lacus. Nunc eros mauris, semper at pellentesque eget, pretium ut lacus. Sed in pulvinar turpis, vitae congue nisi. Mauris aliquam finibus molestie. Duis a volutpat ligula. Nullam lobortis lorem justo, ac gravida arcu mollis quis. Curabitur condimentum diam imperdiet, iaculis libero eget, tempor turpis. Phasellus neque turpis, pretium sit amet nibh ut, egestas rutrum ex. Nam sodales mollis elit ut consequat.<br>
  <img src="http://s.cdpn.io/16327/logo_robust.jpg" />
</div>

The <img> in the code above gets replaced by an empty div.

 

The solution I've found is wrap the text into an extra <div> element and pass that one to the SplitText, thus preserving the <img> element:

<div class="content">
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam elementum enim tincidunt suscipit a et lacus. Nunc eros mauris, semper at pellentesque eget, pretium ut lacus. Sed in pulvinar turpis, vitae congue nisi. Mauris aliquam finibus molestie. Duis a volutpat ligula. Nullam lobortis lorem justo, ac gravida arcu mollis quis. Curabitur condimentum diam imperdiet, iaculis libero eget, tempor turpis. Phasellus neque turpis, pretium sit amet nibh ut, egestas rutrum ex. Nam sodales mollis elit ut consequat.
  </div>
  <img src="http://s.cdpn.io/16327/logo_robust.jpg" />
</div>

Thanks,

Rodrigo.

See the Pen KwgpgJ by rhernando (@rhernando) on CodePen

Link to comment
Share on other sites

Hi Rodrigo  :)

 

hi mate , another solution's using html <h> tags :

 

See the Pen PwGPqL by MAW (@MAW) on CodePen

<div class="content" id="content">
  <h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam elementum enim tincidunt suscipit a et lacus. Nunc eros mauris, semper at pellentesque eget, pretium ut lacus. Sed in pulvinar turpis, vitae congue nisi. Mauris aliquam finibus molestie. Duis a volutpat ligula. Nullam lobortis lorem justo, ac gravida arcu mollis quis. Curabitur condimentum diam imperdiet, iaculis libero eget, tempor turpis. Phasellus neque turpis, pretium sit amet nibh ut, egestas rutrum ex. Nam sodales mollis elit ut consequat.</h4>
  <img src="http://s.cdpn.io/16327/logo_robust.jpg" align="bottom"/>
</div>

and 

mySplitText = new SplitText("#content>h4", {type:"lines"})
Link to comment
Share on other sites

Hello Rodrigo,

 

Does this still happen with any other tag besides a <div> tag ??

 

:)

Link to comment
Share on other sites

  • Solution

Hi Rodrigo,

 

The intended use of SplitText is that you pass it HTML elements that only contain text. Wrapping the text that should be split in a separate <div> is what I would recommend. Hopefully this works for your scenario.

 

Best,

 

Carl

  • Like 1
Link to comment
Share on other sites

Hi Guys,

 

Thanks for jumping in  8-)

 

@Carl, wrapping the text in a separate element actually does the trick (check the second code-block of my first post), I just was wondering if this was an expected behaviour or not. I was expecting that perhaps SplitText will recognize that the element doesn't have any text in it, but I can definitely live with the solution in place.

 

Unfortunately I came around this late last night, so I didn't have time to tinker with the codepen a bit more. I've updated the codepen with both scenarios:

 

See the Pen KwgpgJ by rhernando (@rhernando) on CodePen

 

Thanks,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hello Rodrigo,

 

Does this still happen with any other tag besides a <div> tag ??

 

:)

 

Hey Jonathan,

 

Yes, any tag I've throw to it, returns the same result, <section>, <article>, <header>, <footer>, basically it goes beyond the tag-type and more about the DOM node, as Carl explained.

 

Thanks for the support man!!

Rodrigo.

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