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

• 00
• 01
• 02
• 99
• Q's

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.

Base code - Code Block

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

Base code - Footer Code Injection

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

Option #1: Infinite looping - Footer Code Injection

<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>

Option #2: no looping - Footer Code Injection

<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>

---

Faqs & troubleshooting

• How to use multiple typewriter headings on the same site with different words?

  After having the BASE CODE - FOOTER CODE INJECTION script in place:

  1. You’ll need to set up the BASE CODE -CODE BLOCK snippet for each heading you want to create, whether inside the same Code Block or in separate ones.

  2. Give each snippet a DIFFERENT class name. For example, you can use .typed-words for the first one, then .typed-heading for the second, and .typed-words-2 for the third.

  3. Add the Option #1 or #2 script to the corresponding code injection area for EACH heading you’re creating. I.e 3 typed headings = 3 scripts (the option kind is irrelevant).

  4. Go through EACH of these option scripts and set your words for the corresponding heading.

  5. Modify the CLASS at the bottom of each script to “link” them to the corresponding Code Block heading. Using the same example as before, you’d end up with one script with that last line reading var typed = new Typed('.typed-words', options); a separate script with the last line reading var typed = new Typed('.typed-heading', options); and a last script with that line looking like the following: var typed = new Typed('.typed-words-2', options);