How to Add an Animated Typewriter Text in Squarespace

Mar 1

In today’s tutorial we will learn how to add a retro typewriter effect to your Squarespace website. In today’s tutorial, I’ll show you how to add retro one-time typewriter effect to your Squarespace website, complete with a continuously blinking cursor. We only need one code block for this effect, which can be added to any page section in your site.

How to Add a Text Overlay to your Squarespace Portfolio

1. Add the JavaScript

Open Your Squarespace Editor and go to the Squarespace page where you want to embed the typewriter text.
Insert a Code Block in the section you want to add the text to.
Paste the code below into your code block.

<div class="typewriter-container">
  <h2 class="typewriter-text"></h2>
  <span class="typewriter-blinker">|</span>
</div>

<style>
.typewriter-container {
  display: block;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

.typewriter-text {
  display: inline;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  letter-spacing: 0.15em;
}

.typewriter-blinker {
  display: inline-block;
  margin-left: 3px;
  width: 3px;
  animation: typewriter-blink 1s step-end infinite;
  pointer-events: none;
}

/* Animation for the blinking cursor */
@keyframes typewriter-blink {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}
/* JavaScript for the typewriter effect */
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Text that will be typed
    const text = "Insert Cool Text Here!";
    const typingDelay = 100; // Delay between each character (in milliseconds)
    const textElement = document.querySelector('.typewriter-text');
    let charIndex = 0;
    
    function typeText() {
      if (charIndex < text.length) {
        textElement.textContent += text.charAt(charIndex);
        charIndex++;
        setTimeout(typeText, typingDelay);
      }
    }
    
    // Start the typing animation when the page loads
    setTimeout(typeText, 1000);
  });
</script>

Customize the Code

Change the Text: Modify const text = "Welcome to my website."; to any phrase you like.
Adjust Typing Speed: Increase or decrease typingDelay for slower or faster typing.
Delay Before Typing: The setTimeout(typeText, 1000); at the end controls how long before typing starts (in milliseconds).
Cursor Style: Want a different symbol? Swap out the | for something else.
Text Alignment: Modify this CSS text-align: center to change the alignment of the text.

With these steps, you’ll a retro effect to your Squarespace designs with ease. Play around with the text and colors to make it your own. Happy coding!

Need help implementing this code on your website?

Looking for a custom Squarespace solution or need assistance tweaking this code? Minimist specializes in modern web design and Squarespace coding to fit your needs. Whether it’s styling adjustments, added functionality, or a fully custom site, I can help.

Book a Free Consultation

Articles