12+ JavaScript Typing Text Effect Examples

This post contains a total of 12+ JavaScript Typing Text Effect Examples with Source Code. All these Typing Text Effects are made using JavaScript & Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Typing Text Effect Examples

1. Multiline Typewriter Effect

Made by David Carr’s. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Code+Pro'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<style>
body {
  background-color: #333;
}

.output {
  text-align: center;
  font-family: "Source Code Pro", monospace;
  color: white;
}
.output h1 {
  font-size: 30px;
}

/* Cursor Styling */
.cursor::after {
  content: "";
  display: inline-block;
  margin-left: 3px;
  background-color: white;
  animation-name: blink;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

h1.cursor::after {
  height: 24px;
  width: 13px;
}

p.cursor::after {
  height: 13px;
  width: 6px;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
</style>
</head>
<body>
  <div class="container py-5">
  <div class="output" id="output">
    <h1 class="cursor"></h1>
    <p></p>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script>
// values to keep track of the number of letters typed, which quote to use. etc. Don't change these values.
var i = 0,
a = 0,
isBackspacing = false,
isParagraph = false;

// Typerwrite text content. Use a pipe to indicate the start of the second line "|".  
var textArray = [
"What do you call an alligator wearing a vest?|An Investigator",
"What do you call a fake noodle?|An Impasta",
"Why shouldn't you write with a broken pencil?|Because it's pointless",
"Why couldn't the pirate finish the alphabet?|He kept getting lost a C",
"What's brown and sticky?|A stick",
"What starts with an E, ends with an E and has one letter in it?|An Envelope",
"What has four wheels, and flies?|A Garbage truck",
"What do you call a pig that knows Karate?|Pork Chop",
"Why did the scarecrow get promoted?|He was out standing in his field.",
"I have a step ladder|I never knew my real ladder.",
"What kind of shoes do ninjas wear?|Sneakers"];


// Speed (in milliseconds) of typing.
var speedForward = 100, //Typing Speed
speedWait = 1000, // Wait between typing and backspacing
speedBetweenLines = 1000, //Wait between first and second lines
speedBackspace = 25; //Backspace Speed

//Run the loop
typeWriter("output", textArray);

function typeWriter(id, ar) {
  var element = $("#" + id),
  aString = ar[a],
  eHeader = element.children("h1"), //Header element
  eParagraph = element.children("p"); //Subheader element

  // Determine if animation should be typing or backspacing
  if (!isBackspacing) {

    // If full string hasn't yet been typed out, continue typing
    if (i < aString.length) {

      // If character about to be typed is a pipe, switch to second line and continue.
      if (aString.charAt(i) == "|") {
        isParagraph = true;
        eHeader.removeClass("cursor");
        eParagraph.addClass("cursor");
        i++;
        setTimeout(function () {typeWriter(id, ar);}, speedBetweenLines);

        // If character isn't a pipe, continue typing.
      } else {
        // Type header or subheader depending on whether pipe has been detected
        if (!isParagraph) {
          eHeader.text(eHeader.text() + aString.charAt(i));
        } else {
          eParagraph.text(eParagraph.text() + aString.charAt(i));
        }
        i++;
        setTimeout(function () {typeWriter(id, ar);}, speedForward);
      }

      // If full string has been typed, switch to backspace mode.
    } else if (i == aString.length) {

      isBackspacing = true;
      setTimeout(function () {typeWriter(id, ar);}, speedWait);

    }

    // If backspacing is enabled
  } else {

    // If either the header or the paragraph still has text, continue backspacing
    if (eHeader.text().length > 0 || eParagraph.text().length > 0) {

      // If paragraph still has text, continue erasing, otherwise switch to the header.
      if (eParagraph.text().length > 0) {
        eParagraph.text(eParagraph.text().substring(0, eParagraph.text().length - 1));
      } else if (eHeader.text().length > 0) {
        eParagraph.removeClass("cursor");
        eHeader.addClass("cursor");
        eHeader.text(eHeader.text().substring(0, eHeader.text().length - 1));
      }
      setTimeout(function () {typeWriter(id, ar);}, speedBackspace);

      // If neither head or paragraph still has text, switch to next quote in array and start typing.
    } else {

      isBackspacing = false;
      i = 0;
      isParagraph = false;
      a = (a + 1) % ar.length; //Moves to next position in array, always looping back to 0
      setTimeout(function () {typeWriter(id, ar);}, 50);

    }
  }
}
    </script>
</body>
</html>

2. Typing with Typo Correction and Pause

Made by Christine Mi. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #eee;
}

.typing.animate {
  width: 21ch;
  border-right: 0.1em solid black;
  font-family: monospace;
  font-size: 2em;
  animation: type 2.5s steps(20), writer 1s infinite alternate, delete 0.5s steps(5) 2.5s, type2 1s steps(4) 3s forwards, type3 3s steps(22, end) 6s forwards;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}

.typing.animate::before { 
  content: "Hello, I'm Christine";
  animation: type2 1s steps(4) 3s forwards, type3 3s steps(22, end) 6s forwards;
}

@keyframes type {
  from {
    width: 0;
  }
  to {
    width: 21ch;
  }
}

@keyframes type2 {
  from {
    width: 16ch;
    content: "Hello, I'm Chrissy. "
  }
  to {
    width: 20ch;
    content: "Hello, I'm Chrissy. "
  }
}

@keyframes type3 {
  from {
    width: 20ch;
    content: "Hello, I'm Chrissy. Welcome to my Website!"
  }
  to {
    width: 42ch;
    content: "Hello, I'm Chrissy. Welcome to my Website!"
  }
}

@keyframes writer {
  50% {
    border-color: transparent;
  }
}

@keyframes delete {
  from {
    width: 21ch;
  }
  to {
    width: 16ch;
  }
}
</style>
</head>
<body>
  <div class="typing animate"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
      <script>
$(document).ready(() => {
  let typingElement = $('.typing');

  typingElement.on('click', e => {
    typingElement.removeClass('animate');
    setTimeout(() => typingElement.addClass('animate'), 1);
  });
});
    </script>
</body>
</html>

3. Sample typing effect

Made by Van Huynh. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Oxygen+Mono" rel="stylesheet">
<style>
body, html {
  margin: 0;
  height: 100%;
  text-align: center;
  font-family: "Oxygen Mono", monospace;
  color: #999;
}

h1 {
  text-transform: uppercase;
  letter-spacing: 1pt;
  font-size: 30pt;
  margin-bottom: 15px;
}

p {
  text-align: left;
  margin: 0;
  text-transform: lowercase;
  font-size: 10pt;
  font-weight: 900;
  width: 50%;
  display: none;
}

#table {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #e5e5e5;
}

#centeralign {
  display: table-cell;
  vertical-align: middle;
}
</style>
</head>
<body>
  <div id="table">
  <div id="centeralign">
    <h1>Sample typing effect.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante arcu, dignissim non risus id, posuere efficitur felis. Vestibulum arcu diam, semper non ipsum quis, dictum ultricies diam. Suspendisse vel luctus sapien. Mauris tristique condimentum velit tincidunt pharetra. Curabitur ut lectus eleifend, malesuada lorem eget, consectetur augue. Nunc scelerisque nisi in lacus eleifend eleifend. Praesent blandit ex at nunc maximus, ut sodales ante auctor. Nunc elementum eros sit amet malesuada facilisis. Morbi eget elit consequat, sodales urna in, lobortis nisi. Morbi dapibus velit eu mattis bibendum. Nulla et nisi eget turpis vulputate suscipit eu nec nunc. Pellentesque ut pulvinar quam.</p>
  </div>
</div>
      <script>
function typeEffect(element, speed) {
  var text = element.innerHTML;
  element.innerHTML = "";

  var i = 0;
  var timer = setInterval(function () {
    if (i < text.length) {
      element.append(text.charAt(i));
      i++;
    } else {
      clearInterval(timer);
    }
  }, speed);
}


// application
var speed = 75;
var h1 = document.querySelector('h1');
var p = document.querySelector('p');
var delay = h1.innerHTML.length * speed + speed;

// type affect to header
typeEffect(h1, speed);


// type affect to body
setTimeout(function () {
  p.style.display = "inline-block";
  typeEffect(p, speed);
}, delay);
    </script>
</body>
</html>

4. Typing text transition

Made by Rachel Smith. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One" rel="stylesheet">
<style>
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Rubik Mono One', sans-serif;
  background: #22292C;
}

svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
}

.input {
  position: absolute;
  z-index: 1;
  bottom: 0px;
  font-size: 20px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  font-family: helvetica, sans-serif;
  bottom: 20px;
  background: none;
  border: 1px solid #ddd;
  color: #eee;
}

.text, .offscreen-text {
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  position: absolute;
  margin: 0;
}

.offscreen-text {
  text-align: center;
  top: -9999px;
}

.text span {
  position: absolute;
}
</style>
</head>
<body>
  <p id="offscreen-text" class="offscreen-text"></p>
<p id="text" class="text"></p>

<svg id="svg">
</svg>

<input type="text" class="input", id="input" />
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/CSSPlugin.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/easing/EasePack.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenLite.min.js'></script>
      <script>
const selectSVG = id => {
  const el = document.getElementById(id);
  return new SVGElement(el);
};

const createSVG = type => {
  const el = document.createElementNS('http://www.w3.org/2000/svg', type);
  return new SVGElement(el);
};

class SVGElement {
  constructor(element) {
    this.element = element;
  }

  set(attributeName, value) {
    this.element.setAttribute(attributeName, value);
  }

  style(property, value) {
    this.element.style[property] = value;
  }}


const colors = [
{ main: '#FBDB4A', shades: ['#FAE073', '#FCE790', '#FADD65', '#E4C650'] },
{ main: '#F3934A', shades: ['#F7B989', '#F9CDAA', '#DD8644', '#F39C59'] },
{ main: '#EB547D', shades: ['#EE7293', '#F191AB', '#D64D72', '#C04567'] },
{ main: '#9F6AA7', shades: ['#B084B6', '#C19FC7', '#916198', '#82588A'] },
{ main: '#5476B3', shades: ['#6382B9', '#829BC7', '#4D6CA3', '#3E5782'] },
{ main: '#2BB19B', shades: ['#4DBFAD', '#73CDBF', '#27A18D', '#1F8171'] },
{ main: '#70B984', shades: ['#7FBE90', '#98CBA6', '#68A87A', '#5E976E'] }];

const svg = selectSVG('svg');
const text = document.getElementById('text');
const offscreenText = document.getElementById('offscreen-text');
const input = document.getElementById('input');
let width = window.innerWidth;
let height = window.innerHeight;
let textSize = 0;
let textCenter = 0;
const letters = [];
const prompt = ['s', 't', 'a', 'r', 't', ' ', 't', 'y', 'p', 'i', 'n', 'g'];
let runPrompt = true;

const resizePage = () => {
  width = window.innerWidth;
  height = window.innerHeight;
  svg.set('height', height);
  svg.set('width', width);
  svg.set('viewBox', `0 0 ${width} ${height}`);
  resizeLetters();
};

const resizeLetters = () => {
  textSize = width / (letters.length + 2);
  if (textSize > 100) textSize = 100;
  text.style.fontSize = `${textSize}px`;
  text.style.height = `${textSize}px`;
  text.style.lineHeight = `${textSize}px`;
  offscreenText.style.fontSize = `${textSize}px`;
  const textRect = text.getBoundingClientRect();
  textCenter = textRect.top + textRect.height / 2;
  positionLetters();
};

const positionLetters = () => {
  letters.forEach(letter => {
    const timing = letter.shift ? 0.1 : 0;
    TweenLite.to(letter.onScreen, timing, { x: letter.offScreen.offsetLeft + 'px', ease: Power3.easeInOut });
    letter.shift = true;
  });
};

const animateLetterIn = letter => {
  const yOffset = (0.5 + Math.random() * 0.5) * textSize;
  TweenLite.fromTo(letter, 0.4, { scale: 0 }, { scale: 1, ease: Back.easeOut });
  TweenLite.fromTo(letter, 0.4, { opacity: 0 }, { opacity: 1, ease: Power3.easeOut });
  TweenLite.to(letter, 0.2, { y: -yOffset, ease: Power3.easeInOut });
  TweenLite.to(letter, 0.2, { y: 0, ease: Power3.easeInOut, delay: 0.2 });
  const rotation = -50 + Math.random() * 100;
  TweenLite.to(letter, 0.2, { rotation: rotation, ease: Power3.easeInOut });
  TweenLite.to(letter, 0.2, { rotation: 0, ease: Power3.easeInOut, delay: 0.2 });
};

const addDecor = (letter, color) => {
  setTimeout(() => {
    var rect = letter.getBoundingClientRect();
    const x0 = letter.offsetLeft + letter.offsetWidth / 2;
    const y0 = textCenter - textSize * 0.5;
    const shade = color.shades[Math.floor(Math.random() * 4)];
    for (var i = 0; i < 8; i++) {if (window.CP.shouldStopExecution(0)) break;addTri(x0, y0, shade);}window.CP.exitedLoop(0);
    for (var i = 0; i < 8; i++) {if (window.CP.shouldStopExecution(1)) break;addCirc(x0, y0);}window.CP.exitedLoop(1);
  }, 150);
};

const addTri = (x0, y0, shade) => {
  const tri = createSVG('polygon');
  const a = Math.random();
  const a2 = a + (-0.2 + Math.random() * 0.4);
  const r = textSize * 0.52;
  const r2 = r + textSize * Math.random() * 0.2;
  const x = x0 + r * Math.cos(2 * Math.PI * a);
  const y = y0 + r * Math.sin(2 * Math.PI * a);
  const x2 = x0 + r2 * Math.cos(2 * Math.PI * a2);
  const y2 = y0 + r2 * Math.sin(2 * Math.PI * a2);
  const triSize = textSize * 0.1;
  const scale = 0.3 + Math.random() * 0.7;
  const offset = triSize * scale;
  tri.set('points', `0,0 ${triSize * 2},0 ${triSize},${triSize * 2}`);
  tri.style('fill', shade);
  svg.element.appendChild(tri.element);
  TweenLite.fromTo(tri.element, 0.6, { rotation: Math.random() * 360, scale: scale, x: x - offset, y: y - offset, opacity: 1 }, { x: x2 - offset, y: y2 - offset, opacity: 0, ease: Power1.easeInOut, onComplete: () => {
      svg.element.removeChild(tri.element);
    } });
};

const addCirc = (x0, y0) => {
  const circ = createSVG('circle');
  const a = Math.random();
  const r = textSize * 0.52;
  const r2 = r + textSize;
  const x = x0 + r * Math.cos(2 * Math.PI * a);
  const y = y0 + r * Math.sin(2 * Math.PI * a);
  const x2 = x0 + r2 * Math.cos(2 * Math.PI * a);
  const y2 = y0 + r2 * Math.sin(2 * Math.PI * a);
  const circSize = textSize * 0.05 * Math.random();
  circ.set('r', circSize);
  circ.style('fill', '#eee');
  svg.element.appendChild(circ.element);
  TweenLite.fromTo(circ.element, 0.6, { x: x - circSize, y: y - circSize, opacity: 1 }, { x: x2 - circSize, y: y2 - circSize, opacity: 0, ease: Power1.easeInOut, onComplete: () => {
      svg.element.removeChild(circ.element);
    } });
};

const addLetter = (char, i) => {
  const letter = document.createElement('span');
  const oLetter = document.createElement('span');
  letter.innerHTML = char;
  oLetter.innerHTML = char;
  text.appendChild(letter);
  const color = colors[i % colors.length];
  letter.style.color = color.main;
  offscreenText.appendChild(oLetter);
  letters[i] = { offScreen: oLetter, onScreen: letter, char: char };
  animateLetterIn(letter);
  addDecor(oLetter, color);
};

const addLetters = value => {
  value.forEach((char, i) => {
    if (letters[i] && letters[i].char !== char) {
      letters[i].onScreen.innerHTML = char;
      letters[i].offScreen.innerHTML = char;
      letters[i].char = char;
    }
    if (letters[i] === undefined) {
      addLetter(char, i);
    }
  });
};

const animateLetterOut = (letter, i) => {
  TweenLite.to(letter.onScreen, 0.1, { scale: 0, opacity: 0, ease: Power2.easeIn, onComplete: () => {
      console.log('removing');
      console.log(letter);
      offscreenText.removeChild(letter.offScreen);
      text.removeChild(letter.onScreen);
      positionLetters();
    } });
  letters.splice(i, 1);
};

const removeLetters = value => {
  for (let i = letters.length - 1; i >= 0; i--) {if (window.CP.shouldStopExecution(2)) break;
    const letter = letters[i];
    if (value[i] === undefined) {
      animateLetterOut(letter, i);
    }
  }window.CP.exitedLoop(2);
};

const onInputChange = () => {
  const value = input.value === '' ? [] : input.value.toLowerCase().split('');
  addLetters(value);
  removeLetters(value);
  resizeLetters();
};

const keyup = e => {
  if (runPrompt) {
    input.value = '';
    runPrompt = false;
  };
  onInputChange();
};

const addPrompt = i => {
  setTimeout(() => {
    if (runPrompt && prompt[i]) {
      input.value = input.value + prompt[i];
      onInputChange();
      addPrompt(i + 1);
    }
  }, 300);
};

resizePage();
window.addEventListener('resize', resizePage);
input.addEventListener('keyup', keyup);
input.focus();
addPrompt(0);
    </script>
</body>
</html>

5. Simple JavaScript Typing Effect

Made by Coding Journey. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #000;
  color: #eee;
}
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container p {
  font-size: 3rem;
  padding: 0.5rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-align: center;
  overflow: hidden;
}
.container p span.typed-text {
  font-weight: normal;
  color: #dd7732;
}
.container p span.cursor {
  display: inline-block;
  background-color: #ccc;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}
.container p span.cursor.typing {
  animation: none;
}
@keyframes blink {
  0%  { background-color: #ccc; }
  49% { background-color: #ccc; }
  50% { background-color: transparent; }
  99% { background-color: transparent; }
  100%  { background-color: #ccc; }
}
</style>
</head>
<body>
  <div class="container">
    <p>Coding is <span class="typed-text"></span><span class="cursor">&nbsp;</span></p>
  </div>
      <script>
const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");

const textArray = ["hard", "fun", "a journey", "LIFE"];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 2000; // Delay between current and next text
let textArrayIndex = 0;
let charIndex = 0;

function type() {
  if (charIndex < textArray[textArrayIndex].length) {
    if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
    charIndex++;
    setTimeout(type, typingDelay);
  } else
  {
    cursorSpan.classList.remove("typing");
    setTimeout(erase, newTextDelay);
  }
}

function erase() {
  if (charIndex > 0) {
    if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
    typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
    charIndex--;
    setTimeout(erase, erasingDelay);
  } else
  {
    cursorSpan.classList.remove("typing");
    textArrayIndex++;
    if (textArrayIndex >= textArray.length) textArrayIndex = 0;
    setTimeout(type, typingDelay + 1100);
  }
}

document.addEventListener("DOMContentLoaded", function () {// On DOM Load initiate the effect
  if (textArray.length) setTimeout(type, newTextDelay + 250);
});
    </script>
</body>
</html>

6. Type async

Made by Luciano Felix. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:40");
body {
  padding: 0 10%;
  background-color: #111;
  color: #FFF;
  font-family: "Open Sans", sans-serif;
  font-size: 2em;
  line-height: 100vh;
  white-space: nowrap;
}

.blinking-cursor {
  user-select: none;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}
</style>
</head>
<body>
  <span is="type-async" id="type-text">...</span>
<span class="blinking-cursor">_</span>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
async function init() {
  const node = document.querySelector("#type-text");

  await sleep(1000);
  node.innerText = "";
  await node.type('Hello, ');

  while (true) {if (window.CP.shouldStopExecution(0)) break;
    await node.type('CodePen!');
    await sleep(2000);
    await node.delete('CodePen!');
    await node.type('World!');
    await sleep(2000);
    await node.delete('World!');
  }window.CP.exitedLoop(0);
}


// Source code ๐Ÿšฉ

const sleep = time => new Promise(resolve => setTimeout(resolve, time));

class TypeAsync extends HTMLSpanElement {
  get typeInterval() {
    const randomMs = 100 * Math.random();
    return randomMs < 50 ? 10 : randomMs;
  }

  async type(text) {
    for (let character of text) {
      this.innerText += character;
      await sleep(this.typeInterval);
    }
  }

  async delete(text) {
    for (let character of text) {
      this.innerText = this.innerText.slice(0, this.innerText.length - 1);
      await sleep(this.typeInterval);
    }
  }}


customElements.define('type-async', TypeAsync, { extends: 'span' });


init();
    </script>
</body>
</html>

7. Simple Typing Effect

Made by LeFourbeFromage. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.wrapper {
  padding: 10px;
  margin: 0 auto;
  width: 500px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wrapper .item {
  visibility: hidden;
  display: none;
}
.wrapper h2 {
  font-size: 50px;
  margin: 0;
  color: #3a3a3a;
  text-align: left;
}
.wrapper > div {
  min-height: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: flex-end;
  font-weight: bold;
  color: orange;
}
.wrapper > div:after {
  content: "";
  width: 10px;
  height: 4px;
  display: block;
  background: black;
  color: orange;
  margin-bottom: 4px;
  margin-left: 2px;
  animation-duration: 350ms;
  animation-name: fade;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>
</head>
<body>
  <div class="wrapper">
  <div data-text></div>
  <span class="item">UI & UX designer</span>
  <span class="item">Webdesigner</span>
  <span class="item">Frontend developer</span>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
let wrapper;
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function writingAll(stringTarget, container) {
  wrapper = document.querySelector('[' + container + ']');
  const stringsContainer = document.getElementsByClassName(stringTarget);

  while (wrapper) {if (window.CP.shouldStopExecution(0)) break;
    for (i = 0; i < stringsContainer.length; i++) {if (window.CP.shouldStopExecution(1)) break;
      const string = stringsContainer[i].textContent;
      await write(string);
      await sleep(1000);
      await erase();
      await sleep(1000);
    }window.CP.exitedLoop(1);;
  }window.CP.exitedLoop(0);
};

async function write(text) {
  let index = 0;
  while (index < text.length) {if (window.CP.shouldStopExecution(2)) break;
    const timeout = 100;
    await sleep(timeout);
    index++;
    wrapper.innerHTML = text.substring(0, index);
  }window.CP.exitedLoop(2);
};


async function erase() {
  while (wrapper.textContent.length) {if (window.CP.shouldStopExecution(3)) break;
    const timeout = 100;
    await sleep(timeout);
    wrapper.textContent = wrapper.textContent.substring(0, wrapper.textContent.length - 2);
  }window.CP.exitedLoop(3);
};

writingAll('item', 'data-text');
    </script>
</body>
</html>

8. Type Writer Effect

Made by Brad Traversy. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:200,100,400');

body {
  font-family: 'Raleway', sans-serif;
  height: 100vh;
  background: #333 url('https://image.ibb.co/n5A2HU/showcase.jpg') no-repeat center center / cover;
  color: #ccc;
  overflow:hidden;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 3rem;
}

h1, h2 {
  font-weight: 200;
  margin: 0.4rem;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2rem;
  color: #aaa;
}

/* Cursor */
.txt-type > .txt {
  border-right: 0.2rem solid #777;
}

@media(min-width: 1200px) {
  h1 {
    font-size: 5rem;
  }
}

@media(max-width: 800px) {
  .container {
    padding: 0 1rem;
  }

  h1 {
    font-size: 3rem;
  }
}

@media(max-width: 500px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.5rem;
  }
}
</style>
</head>
<body>
  <div class="container">
    <h1>Brad Traversy The 
      <span class="txt-type" data-wait="3000" data-words='["Developer", "Designer", "Creator"]'></span>
    </h1>
    <h2>Welcome To My Website</h2>
  </div>
      <script>
class TypeWriter {
  constructor(txtElement, words, wait = 3000) {
    this.txtElement = txtElement;
    this.words = words;
    this.txt = '';
    this.wordIndex = 0;
    this.wait = parseInt(wait, 10);
    this.type();
    this.isDeleting = false;
  }

  type() {
    // Current index of word
    const current = this.wordIndex % this.words.length;
    // Get full text of current word
    const fullTxt = this.words[current];

    // Check if deleting
    if (this.isDeleting) {
      // Remove char
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
      // Add char
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }

    // Insert txt into element
    this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

    // Initial Type Speed
    let typeSpeed = 300;

    if (this.isDeleting) {
      typeSpeed /= 2;
    }

    // If word is complete
    if (!this.isDeleting && this.txt === fullTxt) {
      // Make pause at end
      typeSpeed = this.wait;
      // Set delete to true
      this.isDeleting = true;
    } else if (this.isDeleting && this.txt === '') {
      this.isDeleting = false;
      // Move to next word
      this.wordIndex++;
      // Pause before start typing
      typeSpeed = 500;
    }

    setTimeout(() => this.type(), typeSpeed);
  }}



// Init On DOM Load
document.addEventListener('DOMContentLoaded', init);

// Init App
function init() {
  const txtElement = document.querySelector('.txt-type');
  const words = JSON.parse(txtElement.getAttribute('data-words'));
  const wait = txtElement.getAttribute('data-wait');
  // Init TypeWriter
  new TypeWriter(txtElement, words, wait);
}
    </script>
</body>
</html>

9. Typing & erasing effects, plus a blinking cursor

Made by Stathis. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body
{
  background-color: #000;
  padding: 1%;
  color: #ccc;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
}

.console
{
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
}

input[type="button"]
{
  cursor: pointer;
}
</style>
</head>
<body>
  <p>
    <input type="text" id="user-caption" value="Type something here!" />
    <input type="button" id="test-typing" value="Test Typing Effect" />
    <input type="button" id="test-erasing" value="Test Erasing Effect" />  
</p>
<p class="console">
    <span>C:\</span><span id="caption"></span><span id="cursor">|</span>
</p>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var captionLength = 0;
var caption = '';


$(document).ready(function () {
  setInterval('cursorAnimation()', 600);
  captionEl = $('#caption');

  $('#test-typing').click(function () {
    testTypingEffect();
  });

  $('#test-erasing').click(function () {
    testErasingEffect();
  });
});

function testTypingEffect() {
  caption = $('input#user-caption').val();
  type();
}

function type() {
  captionEl.html(caption.substr(0, captionLength++));
  if (captionLength < caption.length + 1) {
    setTimeout('type()', 50);
  } else {
    captionLength = 0;
    caption = '';
  }
}

function testErasingEffect() {
  caption = captionEl.html();
  captionLength = caption.length;
  if (captionLength > 0) {
    erase();
  } else {
    $('#caption').html("You didn't write anything to erase, but that's ok!");
    setTimeout('testErasingEffect()', 1000);
  }
}

function erase() {
  captionEl.html(caption.substr(0, captionLength--));
  if (captionLength >= 0) {
    setTimeout('erase()', 50);
  } else {
    captionLength = 0;
    caption = '';
  }
}

function cursorAnimation() {
  $('#cursor').animate({
    opacity: 0 },
  'fast', 'swing').animate({
    opacity: 1 },
  'fast', 'swing');
}
    </script>
</body>
</html>

10. Typed.js example

Made by Michael. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
	background: #34495e;
	color: #ecf0f1;
	margin: 0;
	padding: 0;
}

.banner {
	display: block;
	min-height: 200px;
	width: 100%;
	position: relative;
}
.typed_wrap {
	display: block;
	border: 4px solid #ecf0f1;
	width: 290px;
	height: auto;
	padding: 30px;
	
	/*centers it in the .banner*/
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.typed_wrap h1 {
	display: inline;
}

/*Add custom cursor so it auto inherits font styles*/
.typed::after {
	content: '|';
	display: inline;
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
}

/*Removes cursor that comes with typed.js*/
.typed-cursor{
   opacity: 0;
	display: none;
}
/*Custom cursor animation*/
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.btns {
	display: block;
	width: 400px;
	margin: 0;
	padding: 30px 0 0 30px;
}
.btns a {
	display: inline-block;
	margin-left: 5px;
}
.btns a:first-child{margin-left:0}
.btn {
	font-family: sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #ecf0f1;
	text-decoration: none;
}
a .btn {
	cursor: pointer;
	border: 1.5px solid #ecf0f1;
	border-radius: 5px;
	display: inline-block;
	padding: 10px;
	list-style-type: none;
	transition: all .3s;
}

.btn:hover {
	background: #ecf0f1;
	color: #34495e;
}
</style>
</head>
<body>
  <div id="page_wrap">
	<ul class="btns">
		<a href="https://www.mattboldt.com/demos/typed-js/" target="_blank"><li class="btn">visit the creator of Typed.js</li></a>
		<a href="https://codepen.io/merb/" target="_blank"><li class="btn">see my other pens</li></a>
	</ul>
	<div class="banner">
		<div class="typed_wrap">
			<h1>We Are <span class="typed"></span></h1>
		</div>
	</div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js'></script>
      <script>
$(function () {
  $(".typed").typed({
    strings: ["Developers.", "Designers.", "People."],
    // Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
    stringsElement: null,
    // typing speed
    typeSpeed: 30,
    // time before typing starts
    startDelay: 1200,
    // backspacing speed
    backSpeed: 20,
    // time before backspacing
    backDelay: 500,
    // loop
    loop: true,
    // false = infinite
    loopCount: 5,
    // show cursor
    showCursor: false,
    // character for cursor
    cursorChar: "|",
    // attribute to type (null == text)
    attr: null,
    // either html or text
    contentType: 'html',
    // call when done callback function
    callback: function () {},
    // starting callback function before each string
    preStringTyped: function () {},
    //callback for every typed string
    onStringTyped: function () {},
    // callback for reset
    resetCallback: function () {} });

});
    </script>
</body>
</html>

11. Auto Typing Text (function)

Made by Connor Gaunt. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400");
.text-js {
  opacity: 0;
}

.cursor {
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  right: -5px;
  width: 2px;
  /* Change colour of Cursor Here */
  background-color: white;
  z-index: 1;
  -webkit-animation: flash 0.5s none infinite alternate;
          animation: flash 0.5s none infinite alternate;
}

@-webkit-keyframes flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
* {
  margin: 0;
  padding: 0;
  boz-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

body {
  background: linear-gradient(135deg, #00C4FF, #9D1BB2);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.headline {
  margin: 20px;
  color: white;
  font-size: 32px;
  text-align: center;
}
.headline h1 {
  letter-spacing: 1.6px;
  font-weight: 300;
}

.twitterLink {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 10px 15px;
  z-index: 3;
}
.twitterLink svg {
  width: 25px;
}

.credit {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-decoration: none;
}
</style>
</head>
<body>
<div class="type-js headline">
  <h1 class="text-js">Look mum, I'm typing!</h1>
  
</div>
<a href="https://connorgaunt.com" class="credit" target="_blank">My Website</a>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
      <script>
function autoType(elementClass, typingSpeed) {
  var thhis = $(elementClass);
  thhis.css({
    "position": "relative",
    "display": "inline-block" });

  thhis.prepend('<div class="cursor" style="right: initial; left:0;"></div>');
  thhis = thhis.find(".text-js");
  var text = thhis.text().trim().split('');
  var amntOfChars = text.length;
  var newString = "";
  thhis.text("|");
  setTimeout(function () {
    thhis.css("opacity", 1);
    thhis.prev().removeAttr("style");
    thhis.text("");
    for (var i = 0; i < amntOfChars; i++) {if (window.CP.shouldStopExecution(0)) break;
      (function (i, char) {
        setTimeout(function () {
          newString += char;
          thhis.text(newString);
        }, i * typingSpeed);
      })(i + 1, text[i]);
    }window.CP.exitedLoop(0);
  }, 1500);
}

$(document).ready(function () {
  // Now to start autoTyping just call the autoType function with the 
  // class of outer div
  // The second paramter is the speed between each letter is typed.   
  autoType(".type-js", 200);
});
    </script>
</body>
</html>

12. Type Shuffle

Made by Tiffany Rayside. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Electrolize);
body {
  margin: 0;
  padding: 0;
 font-family: 'Electrolize';
  font-size: 2em;
  text-transform: ;
  background-color: hsla(0, 0%, 10%, 1);
  color: hsla(0, 0%, 93%, 1);
  width: 100%;
  overflow: hidden;
}

p {
  width: 100%;
  text-align: center;
  margin: 15% auto;
}

button {
  background: transparent;
  border: 1px solid hsla(0, 0%, 0%, .8);
  padding: .5em;
  width: 5em;
  font-size: 60%;
}
</style>
</head>
<body>
  <p>
  <span id="anim"></span><span id="shuffle"></span>
  <br />
  <br />
  <button id='btn'>
    Again
  </button>
</p>
      <script>
var $ = function (id) {
  return document.getElementById(id);
};
var inc = 0;
var out = 0;
var str = 'Do The Type Shuffle...';
var chars = '[email protected]$%&';
var t;

var anim = function () {
  inc++;
  if (inc % 7 === 0 && out < str.length) {
    $('anim').appendChild(document.createTextNode(str[out]));
    out++;
  } else if (out >= str.length) {
    $('shuffle').innerHTML = '';
    removeInterval(t);
  }
  $('shuffle').innerHTML =
  chars[Math.floor(Math.random() * chars.length)];
};
t = setInterval(anim, 50);
$('anim').innerHTML = '';

//Do it again
function reload() {
  window.location.href = window.location.href;
}
document.getElementById('btn').onclick = reload;
    </script>
</body>
</html>

13. Typing Animation

Made by Stephanie Eckles. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Rosario:700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
<style>
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background-color: #f7f3ff;
  color: slateblue;
  font-family: Rosario, sans-serif;
}

h1 {
  font-size: 4.5rem;
  text-align: center;
}

.type-animation {
  display: inline-flex;
  width: 0;
  overflow: hidden;
  padding-right: 0.08em;
  position: relative;
}
.type-animation:after {
  content: "";
  background: #f7f3ff;
  position: absolute;
  right: 0;
  top: -0.05em;
  bottom: -0.05em;
  width: 0.08em;
  border-right: 2px solid transparent;
}
.type-animation.animating {
  -webkit-animation: type 1620ms;
          animation: type 1620ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.type-animation.animating:after {
  -webkit-animation: cursor 320ms 8.625 ease-in-out;
          animation: cursor 320ms 8.625 ease-in-out;
}

@-webkit-keyframes cursor {
  0%, 100% {
    border-color: #f7f3ff;
  }
  50% {
    border-color: #241b5b;
  }
  100% {
    width: 0;
  }
}

@keyframes cursor {
  0%, 100% {
    border-color: #f7f3ff;
  }
  50% {
    border-color: #241b5b;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes type {
  11.1111111111% {
    width: 0.49em;
  }
  22.2222222222% {
    width: 0.98em;
  }
  33.3333333333% {
    width: 1.47em;
  }
  44.4444444444% {
    width: 1.96em;
  }
  55.5555555556% {
    width: 2.45em;
  }
  66.6666666667% {
    width: 2.94em;
  }
  77.7777777778% {
    width: 3.43em;
  }
  88.8888888889% {
    width: 3.92em;
  }
  100% {
    width: 3.92em;
    padding-right: 0;
  }
}
@keyframes type {
  11.1111111111% {
    width: 0.49em;
  }
  22.2222222222% {
    width: 0.98em;
  }
  33.3333333333% {
    width: 1.47em;
  }
  44.4444444444% {
    width: 1.96em;
  }
  55.5555555556% {
    width: 2.45em;
  }
  66.6666666667% {
    width: 2.94em;
  }
  77.7777777778% {
    width: 3.43em;
  }
  88.8888888889% {
    width: 3.92em;
  }
  100% {
    width: 3.92em;
    padding-right: 0;
  }
}
button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.75em;
  background: transparent;
  border-radius: 4px;
  color: inherit;
  border: 2px solid currentcolor;
  min-height: 34px;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
}
button:hover, button:focus {
  background-color: #e6daff;
}
</style>
</head>
<body>
  <h1>My <span class="type-animation animating">Excellent</span> Website</h1>
<button>Retype</button>
      <script>
const button = document.querySelector("button");
const word = document.querySelector("h1 span");

// reset the transition by...
button.addEventListener(
"click",
function (e) {
  e.preventDefault;

  // -> removing the class
  word.classList.remove("animating");

  // -> triggering reflow /* The actual magic */
  void word.offsetWidth;

  // -> and re-adding the class
  word.classList.add("animating");
},
false);
    </script>
</body>
</html>