Does not work properly when animating font-size

[AlexandreBernard]

I've been trying to animate font size to avoid having a brutal glitch when fitting huge titles to the page and it does not work

If I understood properly how it's working it tries different font sizes until the span matches the container width. Am I correct?

As a suggestion I would say that if we want an animated version we could have two spans. One that only serves the purpose of determining the font-size and that should not affect the visual (position absolute and visibility hidden, container being relative) and then apply the font size only with the final result with the css transition applied to the font-size property

[STRML]

Try the examples. Animating the font size shouldn’t even matter / work because the lib is synchronous and we don’t even allow paint to happen. Or at least, it didn’t when I wrote it. Maybe browsers have changed.

…

On Tue, Sep 3, 2024 at 6:08 PM Alexandre Bernard ***@***.***> wrote: I've been trying to animate font size to avoid having a brutal glitch when fitting huge titles to the page and it does not work If I understood properly how it's working it tries different font sizes until the span matches the container width. Am I correct? As a suggestion I would say that if we want an animated version we could have two spans. One that only serves the purpose of determining the font-size and that should not affect the visual (position absolute and visibility hidden, container being relative) and then apply the font size only with the final result with the css transition applied to the font-size property — Reply to this email directly, view it on GitHub <#70>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJEKP7KE5PM6O2CZVWOXYLZUWDALAVCNFSM6AAAAABNRZA7RKVHI2DSMVQWIX3LMV43ASLTON2WKOZSGUYDENBWGIYDMMI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[AlexandreBernard]

I will give it another look. My previous attempt was on Chrome and when applying an animation on the font-size property of the element it resulted in a font size that was too big