Get this animated H1
title
📜 Animated Changing Text for Squarespace
Copy and paste this into a Code Block inside your Squarespace site.
Want a transparent background?
Get the transparent animated title code here!
🚀 How to Customize the Animated Changing Text
Below are simple instructions on how to customize different parts of the code to match your branding and design preferences.
📝 1. Edit the Static Text
The static text is the part of the sentence that doesn’t change.
To modify it, edit this section inside the <h1> tag:
<span class="highlight">This is totally</span>
For example, if you want it to say "Squarespace is", update it like this:
<span class="highlight">Squarespace is</span>
🔄 2. Edit the Changing Words
The rotating words are stored in this JavaScript array:
const words = ["incredible", "awesome", "mind-blowing", "next-level", "fantastic"];
To add, remove, or replace words, simply modify this list. For example, if you want to change the words to "beautiful", "creative", "sleek", update it like this:
const words = ["beautiful", "creative", "sleek"];
🎨 3. Edit the Text Colors
Static text color: Edit the .highlight class in the CSS:
.highlight {
color: #000000; /* Change this to any color */
}
Changing word color: Modify this part in the CSS:
#changing-word {
color: #ff4081; /* Change this to any color */
}
Example: If you want it blue (#007bff), update it like this:
#changing-word {
color: #007bff;
}
🎨 4. Change the Background Color
To modify the background color, update this section in the CSS:
.hero-container {
background: #ffffff;
}
For example, if you want a light gray background, change it like this:
.hero-container {
background: #f8f9fa;
}
🔠 5. Change the Font (Size, Weight, Style)
Edit the font size of the entire text:
.hero-title {
font-size: clamp(2rem, 5vw, 3rem); /* Adjust size */
}
Example: If you want the font to be slightly smaller, adjust to:
.hero-title {
font-size: clamp(1.8rem, 4vw, 2.8rem);
}
*To change the font size *on mobile
1. Find this code:
@media (max-width: 768px) {
.hero-container {
padding: 40px 15px;
}
.hero-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
}
2. Change clamp() sizes. The clamp() function takes three values:
Minimum size (3rem in this example)
Preferred size (6vw in this example)
Maximum size (4rem in this example)
3. So, for bigger mobile text view:
For even larger text: clamp(4rem, 7vw, 5rem)
For more dramatic scaling: clamp(3rem, 8vw, 5rem)
For consistent sizing: clamp(3rem, 3rem, 3rem)
Change the font weight (boldness of the text):
.hero-title {
font-weight: 700; /* Options: 400 (normal), 500 (medium), 700 (bold) */
}
Make the changing word lighter or bolder:
#changing-word {
font-weight: 700; /* Adjust to 400 for a normal look */
}
🔥 Bonus: Customize the Animation Speed
The words rotate every 2.5 seconds.
If you want to change this, edit this line in the JavaScript:
const interval = 2500; // 2.5 seconds
For example, to make it faster (every 1.5 seconds), change it to:
const interval = 1500;