Help with ScrambleText

[George Alex]

Hey, guys. Can you help me understand why my text twitches when it changes? I've racked my brain, but I don't understand what I need to do to achieve a seamless animation. Here is a prime example of what I need. This guy's animation is very smooth. Just hover over the links in the menu https://www.chaingpt.org/

See the Pen OJGJeGL by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen

[ryan_labar]

Most fonts have different widths for each character, which will cause the text to change widths as the characters change. A Monospace typeface will is the easiest fix for this: most font libraries have a filter for this if you need something more custom, but you can use your system's default by this to your CSS:

font-family: monospace;

[George Alex]

45 minutes ago, ryan_labar said:

Most fonts have different widths for each character, which will cause the text to change widths as the characters change. A Monospace typeface will is the easiest fix for this: most font libraries have a filter for this if you need something more custom, but you can use your system's default by this to your CSS:

font-family: monospace;

I'll give it a try. Thanks)

[Rodrigo]

Hi,

 

Ryan is right, if you inspect that site you'll see this as the font family for those elements:

font-family: Roboto Mono,sans-serif;

Another option is to give your link elements a fixed width, that would avoid the problem as well.

 

Happy Tweening!