search

lukePeavey / SplitType

Javascript utility that splits text into lines, words, characters for animation
https://lukepeavey.github.io/SplitType/
545 stars 39 forks source link

SplitType not working as expected in WebFlow project #56

Open dongepulango opened 1 year ago

dongepulango commented 1 year ago

I have no idea what's causing this bug. When i go to my page, sometimes it will split the lines correctly and sometimes it will split additional line. I get the bug 1 out of 10 if I do refresh, mostly when i first open the tab with the link.

Please help how can I prevent this. thanks

Correct:

Screenshot 2023-01-17 at 19 26 46

With bug:

Screenshot 2023-01-17 at 19 26 21

Here is the link: https://creatd-bb.webflow.io/

beanduong commented 1 year ago

It might have something to do with your font loading. Your font gets loaded after the DOM, so because the fallback font is wider than your own font, CURRENCY will cause a line break.

When I open your page for the first time, I get that behaviour. Afterwards, the font gets cached and loads with the DOM on refresh.

lukePeavey commented 1 year ago

It's rendering correctly every time on my end. Were you able to fix the problem?

I think it was probably due to font loading as @beanduong suggested.

dongepulango commented 1 year ago

It might have something to do with your font loading. Your font gets loaded after the DOM, so because the fallback font is wider than your own font, CURRENCY will cause a line break.

When I open your page for the first time, I get that behaviour. Afterwards, the font gets cached and loads with the DOM on refresh.

Any recommendation how to fix the problem? tried font-display: auto; and still the same. What I had before was font-display: swap;. Not even sure if that CSS will fix that problem.

It's rendering correctly every time on my end. Were you able to fix the problem?

Not yet, still testing it.

beanduong commented 1 year ago

CSS-Tricks has a good article on Flash of unstyled text (FOUT).

I have personally used webfontloader to wait for the fonts to be loaded, but the font style matcher approach looks good, too. If you are using Nextjs, @next/font does the preloading for you.

dongepulango commented 1 year ago

CSS-Tricks has a good article on Flash of unstyled text (FOUT).

I have personally used webfontloader to wait for the fonts to be loaded, but the font style matcher approach looks good, too. If you are using Nextjs, @next/font does the preloading for you.

Thanks for the help, I will check it out. We are using Webflow for this project.

lukePeavey commented 1 year ago

Try setting the font family on the heading to system fonts and see if the problem still occurs. If this eliminates the problem, then it is definitely due to SplitType being called before your font has loaded.

JonQuayle commented 1 year ago

This is also something I have been experiencing for a while. I'm using Next js (13), even using the next/font package doesn't really solve this. It seems to be completely random also. For example, I reuse the hero design across my site, so the titles are very similar in length, same font style and size, 2 out of the 4 pages might be fine, but the other two will have one word on each line. Setting the font to system also has no effect.

gogumai commented 1 year ago

Hi @dongepulango , were you able to fix this? I'm also using Webflow and experimenting the same issue, thanks!

suhaylmv commented 11 months ago

CSS-Tricks has a good article on Flash of unstyled text (FOUT).

I have personally used webfontloader to wait for the fonts to be loaded, but the font style matcher approach looks good, too. If you are using Nextjs, @next/font does the preloading for you.

Thanks, this solved it for me. If I were you, I would create a troubleshooting section in the readme and include this, since it seems to be a common issue

Abdox3 commented 11 months ago

A workaround is to lower the font size after splitting