Typing Animation
The classic typewriter effect — done right. Cycle through phrases, control every timing detail, and drop it anywhere on your Squarespace site.
Controls
<!-- Place this where you want the typing effect -->
<div class="sq-typing-wrap">
<span class="sq-typing-text"></span><span class="sq-typing-cursor">|</span>
</div>
<style>
.sq-typing-wrap {
display: inline-flex;
align-items: baseline;
font-size: 36px;
font-weight: 500;
color: #000000;
font-family: inherit;
line-height: 1.3;
}
.sq-typing-text {
display: inline;
}
.sq-typing-cursor {
display: inline-block;
color: #000000;
margin-left: 2px;
animation: sqTypingBlink 0.7s step-end infinite;
}
@keyframes sqTypingBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
</style>
<script>
(function() {
var strings = ["We build websites","We craft experiences","We drive results"];
var typeSpeed = 80;
var deleteSpeed = 40;
var pauseTime = 1500;
var loop = true;
var el = document.querySelector('.sq-typing-text');
if (!el) return;
var stringIndex = 0;
var charIndex = 0;
var isDeleting = false;
function type() {
var current = strings[stringIndex];
if (isDeleting) {
el.textContent = current.substring(0, charIndex - 1);
charIndex--;
} else {
el.textContent = current.substring(0, charIndex + 1);
charIndex++;
}
var delay = isDeleting ? deleteSpeed : typeSpeed;
if (!isDeleting && charIndex === current.length) {
delay = pauseTime;
isDeleting = true;
} else if (isDeleting && charIndex === 0) {
isDeleting = false;
stringIndex++;
if (stringIndex >= strings.length) {
if (!loop) return;
stringIndex = 0;
}
delay = 500;
}
setTimeout(type, delay);
}
type();
})();
</script>Why this matters
Grab attention instantly
Moving text draws the eye faster than static headlines. A typing animation on your hero section keeps visitors engaged those critical first 3 seconds.
Say more in less space
Cycle through multiple value propositions in a single headline slot. One element, infinite messages — perfect for landing pages.
Lightweight by design
No libraries, no dependencies — just vanilla JavaScript that works everywhere. The entire script is under 1KB and runs at 60fps.
How to add this to Squarespace
Copy the generated code above.
In Squarespace, add a Code Block where you want the typing animation to appear.
Paste the HTML snippet into the Code Block. This creates the container element.
Go to Settings → Advanced → Code Injection → Footer and paste the CSS + JS portions.
Save and preview. The animation starts automatically on page load.
A little over your head?
No shame — this stuff is hard. Let the pros handle it.
