Jump to content
GreenSock

mattiasdominguez

SplitText issue with splitting and animating lines that contain <strong></strong> tags

Recommended Posts

Hi all,

I'm having some trouble with animating lines that are split with the SplitText plugin and contain <strong></strong> tags. I'm probably doing something wrong in the splitting context but can't seem to figure out what exactly I should do to prevent or improve this.

In this screenshot (https://share.getcloudapp.com/GGuE2bzO) and the codepen you'll see that a line that contains <strong></strong> tag doesn't get split / wrapped like it should.

 

The desired effect I'm after is that the lines fade in from the bottom up within a line container that's on overflow:hidden; like on like on outhere-music.com (view screenshot) and nieuwbergen.com when you scroll down and see this => https://share.getcloudapp.com/Wnuql58O

 

Thanks a million for your help and guidance, any tips on how to get a more smooth effect are obviously welcome!!

See the Pen RwLORvB by mdominguez (@mdominguez) on CodePen

Link to comment
Share on other sites

Hi mattias,

 

I'm not seeing any issues, but you should always make sure your fonts are loaded before splitting your text.

 

 

And for <strong>, you should try setting it to inline-block.

 

 

I'm also unsure of what you're trying to do here. Those are supposed to be class names, not CSS properties. 

 

linesClass: 'overflow-hidden',
      wordsClass: 'inline-block'

 

And to improve performance, try adding will-change: transform in your CSS to the elements you are animating.

  • Like 1
Link to comment
Share on other sites

Hi @OSUblake

Thanks for your guidance!

 

The key solution here in fact was that I needed to manually put every bold word in separate strong tags (<strong>xxx</strong>) instead of having multiple words in 1 strong / b tag (<strong>hello greensock world this is a bold sentence.</strong>)

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