Typing and Deleting Effect with JavaScript

Typing and Deleting Effect with JavaScript
Code Snippet:Text Retype
Author: Douglas Hensel
Published: January 12, 2024
Last Updated: January 22, 2024
Downloads: 506
License: MIT
Edit Code online: View on CodePen
Read More

This JavaScript code snippet helps you to create typing and deleting effect. You can set phrases in a array that you want to use in typing and erasing animation. It seamlessly switches words within the element ID ‘retype,’ providing a cleaner transition when neighboring words have distinct initial letters.

You can integrate this animation inside the hero section of your website, personal portfolio, or animated blocks for additional attention to your content. Moreover, you can customize the animated text with additional CSS according to your needs.

How to Create Typing and Deleting Effect with JavaScript

1. Start by incorporating the HTML snippet into your webpage. The <span> element with the ID of ‘retype’ is where the magic happens. Customize the text inside according to your preference.

<p>This code is <span id="retype">Awesome.</span></p>

2. Make your animation visually appealing with some CSS styling. The following styles give a gradient background and a subtle border effect to the animated text. Feel free to modify the styles to match your website’s aesthetic.

body{
  background: linear-gradient(to right, #c0c0aa, #1cefff);
}

.cd__main p{
	padding: 20% 10%;
	font-size: 200%;
	font-family: arial;
	color: #333333;
}
#retype{
	color: #3333DD;
	border-right: solid 0.1em #333377;
}

3. Finally, add the following JavaScript function to your project. The ‘retype’ object is responsible for creating a seamless transition between words. Replace sample words with your own.

// OBJECT: 'retype' controls the deletion and creation of new words
var retype = {
	// ARRAY: 'retypePhrases' contains the words that will be switched
	//		  The tool replaces the word contained within the element with the ID of 'retype'
	//		  It works cleaner if neighboring words have different first letters.
	//		  Spaces in phrases can cause a hiccup. Best practice to keep phrases as single words.
	retypePhrases: [
		'Quick.',
		'Fun.',
		'Easy.',
		'Fast.',
		'Simple.',
		'Awesome.'
	],
	index       : -1,
	elem        : document.getElementById('retype'),
	start       : function(){
		var _this = this;
		setTimeout( function(){
			_this.deleteLetter();
		}, 3000 ); // Delay the start of a new word by 3 seconds
	},// END retype.start()
	deleteRepeat: function(){
		this.deleteLetter();
	},// END retype.deleteRepeat()
	deleteLetter: function(){
		var newWord = this.elem.innerHTML;
		if( newWord.length > 0 ){
			newWord = newWord.substring(0, newWord.length - 1);
			var _this = this;
			setTimeout( function(){
				_this.elem.innerHTML = newWord;
				_this.deleteRepeat();
			}, 75 );
		}else{
			this.newLetter();
		}// END if( newWord.length > 0 )
	},// END retype.deleteLetter()
	newRepeat   : function(){
		this.newLetter();
	},// END retype.newRepeat()
	newLetter   : function(){
		var newWord = this.elem.innerHTML;
		if( newWord.length === 0 ){
			this.index++;
			if( this.index >= this.retypePhrases.length ){
				this.index = 0;
			}
		}// END if( newWord.length === 0 )
		var newLetters = this.retypePhrases[ this.index ];
		if( newLetters.length > newWord.length ){
			newLetters = newLetters.substring(0, ( newWord.length + 1 ) );
			var _this = this;
			// Add a slight random variation in retype time to make the letter typing seem more 'human'
			var time = Math.round( Math.random() * 100 ) + 100;
			setTimeout( function(){
				_this.elem.innerHTML = newLetters;
				_this.newLetter();
			}, time );
		}else{
			this.start();
			// Yep, this makes the retype an infinite loop
		}// END if( newLetters.length > newWord.length )
	}// END retype.newLetter()
};

retype.start();

That’s all! hopefully, you have successfully created a typing and deleting effect with JavaScript. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X