Self-typing text effect in interfaces is mainstream, especially after AI bots are becoming more and more popular... |
However, developers can ignore at least two problems that can degrade the user experience.
I give these two tips when implementing this effect:
✍️ 1) If it's fake real-time, add the ability to skip the effect. In 99% cases, a text which should be displayed is already loaded in users browsers before showing. Waiting while the effect will finish can be time-consuming and nerve-wracking. A text should be able to be available immediately, if possible.
This can be done by clicking on the text area or on a special button.
✍️ 2) Not correct auto-translation of such text. Check that a browser translator works correctly, and what code ends up pasted in the HTML? Even ChatGPT can throw an error if you translate the page into a language other than English while printing text.
To solve this problem, you can replace the DOM node after all the text has been shown. Or better customize your tool and printing technique for each character and text.
I solved these problems on my site. You can take a look (actual on April 2024). https://artemshar.space
As for tools, I think there are many ready-made solutions, but I used the https://www.npmjs.com/package/typewriter-effect, which is good and deserves a star.
Top comments (0)