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

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>)

[Split text confused]

On 5/14/2020 at 5:20 PM, GreenSock said:

Got a demo? That'll definitely help us help you.

Woops... Didn't see this and experiencing the same problem 1,5 years later 😅

Codepen => 

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

Other topic that I've just created today => 

 

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

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

[Split text confused]

Hi!

 

Could it be that this workaround doesn't work with <strong> tags?

[SplitText animation]

Thank you very much for these tips, very helpful to better understand the tweening!

Do you think it could be possible to have the width of the animated word(s) adjusted AFTER all the characters are tweened upwards? Cause now they're getting pushed together as the width per character decreases. Maybe as another chained animation on the tl?

[SplitText animation]

New here so hi all!

 

I'm trying to animate these words in this sentence and would like to have the width of the sentence adjusted smoothly to the visible / animated word. All of the animated words should start at the same place. Don't know for sure if my explanation makes sense to what I'd like to accomplish. Any ideas on how to achieve this? I've added a codepen.

 

Thanks in advance!

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