Typewriter effect on pure JS with GSAP Text Plugin. Code example

With this plugin, you can animate individual characters, words, or lines of text with ease, creating effects such as typewriter text, letter-by-letter animations, and more. Before you start, you need to connect the main GSAP script and the TextPlugin plugin script. You can plugin it via CDN.

After connecting, we can use it immediately. Consider on example:

//register our plugin
gsap.registerPlugin(TextPlugin)

gsap.to('.testblock', {
	duration: 2,//animation speed
	text: 'Hello, world',
	text: { //or use object for more settings
		value: 'Hello, world',//we can set a text value
		delimiter: '',//character separator, how to put a space can be separated by words
		newClass: '',
		oldClass: '',
		type: 'diff',//transformation algorithm
	}
}