Create a typewriter effect for headings in Squarespace (7.0, 7.1 CE & 7.1 FE)

• 00
• 01
• 02
• 99

One of THE coolest effects I’ve seen so far for headings is the typewriting effect.

And, believe it or not, it’s pretty easy to implement it in Squarespace if you know where to look.

For today’s tutorial, I want to show you how you can use an awesome third-party plugin to create this animation on your client’s site in record time.

So, without further ado, let’s get right to it:

Tutorial

Overview & timestamps

Even when we need to use the Code Injection Section to change up all the settings for this customization, you’ll be surprised at how easily everything can be implemented anywhere in Squarespace.

So, let’s get to it!

1. 00:00 - Intro

2. 01:12 - Looking at the necessary heading setup
   Before embedding the plugin onto our site, we’ll need to make sure things are set up for our heading. We’ll be using a Code Block with just a sprinkle of HTML inside it to have the structure we need to seamlessly create the typewriting effect.

3. 02:56 - Implementing the typewriting plugin into Squarespace and understanding how it works
   Moving onto the actual code, we’ll look through the documentation for the necessary parts of the plugin we need to add to our project in order to make it work in its default state (kinda). At this point, we’ll also add in our OWN phrases before checking out the initial result.

4. 05:43 - Modifying the options of the typewriter plugin
   After deciding what we want to tweak about the typewriter effect, we’ll include a few additional settings to control the speed of both the typing and erasing animations, as well as the looping mode.

5. 07:46 - Testing out other options from the plugin
   Last but not least, we’ll spend a few more minutes trying out additional options that the plugin offers, just to check what it would look like to have a different cursor, making the text fade out vs. erase away, and shuffling the order of the phrases.

And just like that, you can now add a lovely typewriting effect to your client’s headings!

Until next time,

B.

---

Full code

Note: you can also get all the code I didn’t use directly from the creator’s site and his GitHub!

June 2023: the creator has made an update to the code, so below you’ll find a slightly different version of the typed.js script than the one used in the tutorial.

Code Block HTML

<h1>
  Nulla fascilis
  <span class="typed-words"></span>
</h1>

Code Injection Section JS (infinite looping)

<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
<script>
  var options = {
  strings: ['lorem', 'ipsum dolor', 'magna', 'vitae congue'],
  typeSpeed: 100,
  backSpeed: 50,
  backDelay: 500,
  startDelay: 1000,
  loop: true,
};

  var typed = new Typed('.typed-words', options);
</script>

Code injection section JS (No looping)

<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
<script>
  var options = {
  strings: ['lorem', 'ipsum dolor', 'magna', 'vitae congue'],
  typeSpeed: 100,
  backSpeed: 50,
  backDelay: 500,
  startDelay: 1000,
  onComplete() {
    $('.typed-cursor').remove(); //remove this line if you want to KEEP the cursor at the end
  },
};

  var typed = new Typed('.typed-words', options);
</script>