Cleanest way to refresh or play a tween when the font is loaded

[Michaël Garcia]

Sometimes, when I play with words and letters my tweens act pretty weird.

I noticed that's because the font is not loaded when the tween is declared (even if it's declared inside the classic DOMContentLoaded)

I've found this workaround but I've been wondering if there's a cleaner way of doing it : 

 

 

const font = new FontFace('HelveticaNowDisplay', 'url(t/HelveticaNowDisplay-Regular.woff2)');

font.load().then(() => {

    // my tweens

})

 

Is there a magical gsap property to directly handle this case, or another approche ?

Thank you very much

[Rodrigo]

Hi,

 

1 hour ago, Michael31 said:

Is there a magical gsap property to directly handle this case

Nope, sorry. GSAP is intended just for animation and not for attending other things, especially when there is an API for such cases (as there is for the font loading event)

 

As far as I can tell there isn't a simpler approach for this. What you have is what I would do and what we've seen it works, among other situations, when creating ScrollTrigger/SplitText instances, just to mention the most common cases when this is actually needed.

 

Happy Tweening!

[Michaël Garcia]

Thank you for your inlights !