Jump to content
Search Community

[Bug] SplitText lines and multiple font sizes

W2P Digital test
Moderator Tag

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,

 

When I try to splitText a text (by lines) with nested tags, it works correctly.

But when the font size of the nested tag is different than the rest of the text, it doesn't work anymore. The nested tag is wrapped in a line (alone).

 

I tried to update SplitText to the latest version (0.7.0) but the issue is still there.

 

Thanks,

Valentin

 

See the Pen wOvBgY by valentinchevalier (@valentinchevalier) on CodePen

Link to comment
Share on other sites

Yes, I see what you mean @W2P Digital and that's tricky because the way SplitText determines if something is on a different line is if its y-position is different. In your case, of course, the bounding box of the bigger text is indeed different than the smaller text next to it. If we shifted to look at the x-position instead, that has its own challenges as well (like indentation would throw things off). See what I mean? If you've got any ideas, I'm all ears. This may be one scenario when you're better off manually wrapping things to specify your intent. I wish I had a great [automated] solution for ya. 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Thank you very much for your explanation about how SplitText works.

 

It helps me to know that the y-position determines the split. So i try to play with the line-height, inline-block vertical alignement and transform to adjust the position.

 

Here is what i did to make it works 

 

 

See the Pen oVNmZy by valentinchevalier (@valentinchevalier) on CodePen

 

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