BlogsDope image BlogsDope

12 Creative CSS and JavaScript Text Typing Animations

Nov. 11, 2018 CSS JAVASCRIPT EXAMPLE ANIMATION TEXT 302126

Adding a little animation to a website can make it eye-popping. There are various ways you can create animations, one of which is adding a typing effect to your text. Typewriter text animations are quick to implement and can do wonders for your website by making it look exceptionally impressive.

12 handpicked typing text animations are shown below along with their source code. A bit of knowledge of CSS and JavaScript is all you need to learn to use these animations. You can go to this post which explains step-wise creation of a typewriter effect.

To begin with, some simple typing animations created using pure CSS are shown which can give an elegant look to your text and website as a whole.

1. A Simple Typing Effect with Blinking Cursor

See the Pen Typewriter Text Animation by Aakhya Singh (@aakhya) on CodePen.

This is a simple yet beautiful typewriter effect created using CSS animation. It uses Source Code Pro as a font base to give it the effect of typewriter. Its code is explained in the post - Creating Typewriter Text Animation using CSS.

2. Style the Cursor

See the Pen Typewriter Text Animation by Aakhya Singh (@aakhya) on CodePen.

This animation uses a horizontal blinking cursor having the width of the characters of the text. Simply changing the cursor shape can give your animation a different look. You can try using other types and shapes of cursors as well.

3. Typing Effect Without Cursor

See the Pen Typewriter Text Animation without Cursor by Aakhya Singh (@aakhya) on CodePen.

This animation shows typewriter effect without cursor. This is achieved by removing the right border of the paragraph containing the text.

4. Smooth Typing Effect with Blinking Cursor

See the Pen Smooth Typewriter Text Animation by Aakhya Singh (@aakhya) on CodePen.

In the previous demos, the steps( ) function was given as value to the animation-timing-function property. It showed the typing animation in steps in which each step displayed a character.

To make this animation smooth, the linear( ) function is used in place of the steps( ) function in this demo.

5. Text Moving to Left

See the Pen Typewriter Text Animation by Aakhya Singh (@aakhya) on CodePen.

This type of animation is another way to make your typing effect look cool. It is achieved by positioning the paragraph containing the text to the right.

6. A Typing Effect with Center Aligned Text

See the Pen Typewriter Text Animation by Aakhya Singh (@aakhya) on CodePen.

This effect is achieved by horizontally center aligning the paragraph containing the text.

The animations shown above are created using just CSS. The next two animations show typewriter effect for multiline text.

7. Multiline Typewriter Effect

See the Pen Tippy-tappy-typer by Stove (@stevn) on CodePen.

Typing effect can be extended to multiple lines of text as well. This demo displays the different lines of code in a pre tag as if they are being typed.

8. Another Multiline Typewriter Effect

See the Pen Multiple-Line Typewriter Effect by Aakhya Singh (@aakhya) on CodePen.

This demo shows typewriter effect for multiple text lines of a paragraph without displaying cursor.

Another trending typing effect is erasing the typed text and typing some other text in place of it. Few such animations are shown below.

9. Erasing Typos

See the Pen Typewriter Effect by Aryan Patel (@aryanpatel170504) on CodePen.

This is a very cool effect created using only CSS, which makes it appear as if someone is typing the text and erasing the letters typed by mistake.

10. Simple Typing Carousel

See the Pen Simple Typing Carousel by KS (@CheeseTurtle) on CodePen.

This is a pretty popular text animation technique. It is sometimes used by websites to showcase their products range, services offered or to list other such descriptions.

The animation uses a combination of CSS and JavaScript to rotate text snippets as if they were being typed. This effect improves readability because it displays only one item at a time on the screen.

11. Typing and Deleting Multiline Effect

See the Pen Multiline Typewriter Effect by David Carr's Pens (@daviddcarr) on CodePen.

If you want to type and delete multiline text, then this demo is for you. It's a fun effect which you can use on your homepage in place of displaying a lot of lines of text.

12. Making It User Interactive

See the Pen Typing & erasing effects, plus a blinking cursor by Stathis (@stathisg) on CodePen.

Lastly, we have this demo which allows the user to type text and erase it as if it is being typed and erased on a text editor. There are separate buttons for the two operations. This effect can be used in a lot of applications, like making the user choose from a list of questions and erasing the selected question when he submits an answer to it.

Conclusion

So, this was a list of some cool typewriter animation effects created using only CSS and JavaScript. There is a lot which can be done with typography to create impressive effects. You can come up with a new one using some permutations and combinations. Hopefully, one of these will be making your homepage look more awesome.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
3 COMMENTS

Please login to view or add comment(s).