Create a Typewriter Effect in Ghost Blog

Create a typewriter effect in a blog post

Put this code where you want the typewriter effect to display in the page.

• Note: add this code as a card within a blog post or page, do not use code injection.

<h2 id="typewriter">Typewriter</h2>

Add this code to the code injection for this specific blog post. When in the text editor for a Ghost blog, click the Settings button in the top right. Scroll down and click on Code injection.

Insert this code into the blog post code injection under Post header:

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

Put this code at the bottom of the page using a "raw HTML card."

• Note: add this code as a card within a blog post or page, do not use code injection.

<script>
    const app = document.querySelector('h2#typewriter');

    const typewriter = new Typewriter(app, {
      loop: true,
      delay: 20,
      typingSpeed: 20,
      deleteSpeed: 20
    });

    typewriter
      .typeString("I'm a <strong>financial analyst</strong>")
      .pauseFor(750)
      .deleteChars(17)
      .typeString('<strong>quant investor</strong>')
      .pauseFor(750)
      .deleteChars(15)
      .typeString('<strong>founder</strong>')
      .pauseFor(750)
      .deleteChars(7)
      .typeString('<strong>lifelong learner</strong>')
      .pauseFor(1000)
      .deleteAll(22)
      .start();
</script>
</code>

The code block above is what I use for my "About" page. You can change the text within the quotes to make it print the text you want. (Make sure to change the .deleteChars value to the correct number of characters for your text.)