How to create a typing text animation in Squarespace

Jan 12

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

HERE IS AN EXAMPLE OF SOME TYPING TEXT - PRETTY COOL HUH?!

This tutorial will show you how to create a typing text effect in Squarespace, where a block of text will appear to be typed onto the page after it loads.

It’s a pretty simple code but there are a few things you can customize to make it look amazing on your own site!

I wrote out the steps below and recorded a quick tutorial for you so you can follow along.

I also want to encourage you to get creative with the font style itself using some CSS! I have a few examples of codes for color, bold font styles that you can customize. 🤩

Download Transcript

Step One

Add this code below to a code block, changing up the sentence to what you want to see.
<div class="typeit"> HERE IS AN EXAMPLE OF SOME TYPING TEXT</div>

Step Two

Navigate to your custom CSS ( Design → Custom CSS ) and paste this code below

.typeit {
  overflow: hidden;
  font-size:25px; /* this can be any font size you want */
  border-right: 2px solid #50bdb8; /* change this color in the keyframe too */
  white-space: nowrap;
  margin: 0 auto;
  animation:
    typeit 3.5s steps(40, end),
    right-border .5s step-end infinite;
}
@keyframes typeit {
from { width: 0 }
to { width: 100% }
}
@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #50bdb8; /* change this in the CSS above too */ }
}

Optional Step Three

Customize your scrolling text with CSS! You can change the font family, color, size, style and more using some code. If you want to change the font color and thickness, add this after your first curly bracket { in the code above, like this: