How to Add an Animated Typewriter Text Effect in Squarespace 7.1

Jun 28

Looking to make your Squarespace website stand out instantly? A typewriter animation effect is one of the sleekest ways to grab attention, especially for headlines, intros, or call-to-actions.

In this tutorial, you’ll learn how to create a dynamic type-and-delete animation using lightweight custom code, no plugins, no slowdown, just beautiful motion.

What Is It?

The typewriter animation types out a word or phrase letter by letter, then deletes it, and loops again. It creates a feeling of movement and interaction, perfect for modern websites.

Why Use It?

Here’s why this animation is so popular:

Instantly grabs attention
Adds life to static text
Emphasizes keywords (like services, locations, or brand values)
Works beautifully on all devices

Whether you're showcasing your business slogan or listing professions (like Designer, Developer, Leader), this animation creates a lasting impression.

How It Works

This solution uses:

Simple HTML container to hold the text
Lightweight Typed.js JavaScript library
Clean CSS styling for the typewriter look

The result: a fully animated, looping typewriter effect — all without any external plugins.

Step-by-Step Implementation

Step 1: Add the HTML

Place this code inside a Code Block on your desired page section (Banner, Header, etc.):


<h1>
  BECOME A <br>
  <span class="typewriter"></span><br>
  OF THIS REALM
</h1>

You can edit the surrounding text and structure freely — just keep the <span class="typewriter"></span> where you want the animated word.

Step 2: Load Typed.js Library

Go to: Settings → Advanced → Code Injection → Header

Paste this:


<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>

This loads the Typed.js library, which handles the animation logic.

Step 3: Add JavaScript to Control the Animation

Next, scroll down to the Footer section under Code Injection and paste this:


<script>
  var typed = new Typed('.typewriter', {
    strings: ['Student', 'Master', 'Light'], // <- Edit your phrases here
    typeSpeed: 120,
    backSpeed: 60,
    backDelay: 1500,
    startDelay: 500,
    loop: true
  });
</script>

Optional CSS Styling (Add in Design → Custom CSS)

This will make the text bolder and add a blinking cursor:


.typewriter {
  font-weight: bold;
  font-size: 2em;
  color: #ff6600;
}
.typed-cursor {
  font-weight: 100;
  font-size: 1em;
  color: #ff6600;
  animation: blink 0.7s infinite;
}
@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

Customize the color and font size to match your site's branding as you like.

How to Use & Customize

You can easily personalize the animation by updating these:

  
        Setting
        Description
      
        strings
        Words to display, in the order you want
      
        typeSpeed
        How fast the letters typed
      
        backSpeed
        Speed of the deletion
      
        loop
        true to keep repeating forever
      
        startDelay
        Wait time before first word appears
      
        backDelay
        Time between finishing typing and deleting

Advanced Styling Ideas

Here are some extra style upgrades you can add:

Typing only (no delete) – Remove backSpeed and loop
Color-changing words – Add span tags with color classes inside the strings
Stop after one loop – Set loop: false
Add fade-in or slide-in animation – Use CSS transitions on .typewriter

Let me know if you'd like help with any of these!

Final Thoughts

Adding a typewriter animation to your Squarespace 7.1 site is a simple yet powerful way to bring your content to life. Whether you're highlighting services, introducing your profession, or drawing attention to a brand message, this effect adds motion and interactivity that static text just can’t match.

Frequently Asked Questions (FAQ)

Will this animation work on mobile devices?
Yes! Typed.js is fully responsive and works on all modern browsers and devices, including phones and tablets.

Can I use this effect in multiple sections of the same page?
Absolutely. Just make sure each typewriter instance has a unique class or ID and a separate JavaScript initialization.

Can I change the speed or pause time between words?
Yes — use the typeSpeed, backSpeed, startDelay, and backDelay options to fully customize the animation flow.

Is this animation SEO-friendly?
Yes — the text is still HTML-based, meaning search engines can read it. However, the animated part loads dynamically, so it's best used for visual emphasis rather than critical keywords.

Can I add styling to each word in the animation?
Yes! You can wrap words in HTML tags (like <span class="highlight">) inside the strings array to apply custom styles (like colors or effects).

What happens if I remove loop: true?
The animation will type the first word and stop after completing the full list, once, great for one-time introductions.

Will this slow down my site?
Not at all. Typed.js is a very lightweight script and does not significantly affect your site’s loading speed.