SplitText and ScrollTrigger do not always produce the same result

[konstantinschuette]

Demo: https://codesandbox.io/s/youthful-glitter-wrwi0l

Make sure your browser is at least 635px wide, so that it has no horizontal scrollbars.

 

This how it looks, when you open it on the first time or in a incognito tab (not displayed correctly):

 

After a browser refresh in Codesandbox, it will be displayed correctly:

 

What could cause this behaviour?

[PointC]

Looks like you're loading Montserrat. Seems like maybe this is a 'wait for custom font' and/or kerning issue. Check out this thread for some ideas.

Happy tweening.

 

[konstantinschuette]

Seems like the font is not loaded early enough.

Because wrapping the GSAP code with `

document.fonts.ready.then(() => {[...]})

`

seems to do the trick.

 

But now on the first time visiting the page, the text flashes, before the font is loaded.

Is there any way to prefetch the font, so that the first rendering is always happening with that font?

I looked up all the possible `rel` attributes for the HTML link tag, but none seem to fit this (https://3perf.com/blog/link-rels/)

[PointC]

You can set visibility:hidden in your CSS and then set the autoAlpha when everything is ready.

 

[OSUblake]

You can also change the font-display to tell it how to load the font. Right now you have it set to swap, which will show the fallback first.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

https://css-tricks.com/almanac/properties/f/font-display/

 

Quote

• swap: Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.