How to create animated rotating text in Squarespace
A single heading doesn't have to deliver just one message. With rotating text, you can cycle through different words, phrases, or entire sentences, adding movement and variety to your Squarespace designs without taking up extra space.
Whether you're highlighting multiple services, showcasing different brand messages, or adding a subtle animation to a hero section, rotating text is a simple way to make typography more dynamic.
With Text Loop, a tool inside the SquareKicker Extension, you can create these effects directly in Squarespace without writing any code.
In this guide, you'll learn how to set up your first Text Loop, customize its animations and timing, and explore a few creative ways to use it on your next client website.
What is Text Loop?
Text Loop lets you automatically cycle through different words, phrases, or sentences within a Squarespace text block.
Rather than displaying a static heading, you can create a sequence of messages that transition from one to the next using animated effects.
For example, a heading could read:
We help brands design.
Then automatically change to:
We help brands create.
We help brands build.
We help brands imagine.
The rest of the heading stays in place while the final word rotates through your chosen text.
You can also apply Text Loop to an entire heading or sentence, allowing multiple messages to appear in the same space.
With six animation styles and adjustable timing controls, you can tailor the effect to suit the design and pace of your website.
How to add rotating text to Squarespace
Setting up Text Loop takes just a few steps. You can apply it to an existing text block or create a new one.
Step 1: Choose the text you want to animate
Open your Squarespace website in edit mode and select the text block you want to customize.
Text Loop works with different types of text, including headings and paragraphs. You can animate a single word, a phrase, or the entire text.
For this example, we'll create a heading where the final word changes while the rest stays the same.
Step 2: Select your rotating text with strikethrough
Highlight the word or phrase you want to replace with rotating text.
Using Squarespace's text formatting options, apply strikethrough to the selected text.
This tells Text Loop exactly which part of the text block you want to animate.
Important: The text you've formatted with strikethrough acts as a placeholder. It won't appear as part of your rotating sequence. You'll need to enter the words or phrases you want to display directly into the Text Loop tool.
You can apply strikethrough to a single word or select an entire sentence if you want the full heading to change.
Step 3: Open Text Loop in SquareKicker
With your text block selected:
Open the SquareKicker Extension tools for that block.
Navigate to the Advanced tab.
Find and open Text Loop.
Switch on Enable.
Once enabled, the strikethrough formatting disappears from the selected text, and you're ready to add your rotating content.
Step 4: Add your words or phrases
Inside Text Loop, you'll find a field where you can enter the text you want to display.
Type your first word or phrase and press Return to add it to the sequence.
Repeat this process for each additional word or phrase.
For example, you could enter:
Make
Build
Design
Create
Imagine
Each entry becomes part of the rotating sequence.
Once they're added, you can also edit, reorder, or delete entries to refine your sequence.
As you add multiple entries, you'll see the text begin cycling through them in your heading.
Tip: You can still use Squarespace's text styling options to customize the appearance of your rotating text, including changing its color.
Customize your Text Loop animation
Once your text is in place, you can choose how each word or phrase transitions to the next.
Text Loop includes six animation styles, giving you different ways to introduce movement into your typography.
Choose from six animation styles
Slide
Text slides into position, creating a clear directional transition between words or phrases.
Fade
Each message gently fades in and out. A good option when you want movement that feels subtle and understated.
Zoom
Text zooms into view before zooming out, adding a more noticeable sense of movement.
Flip
Each message flips to reveal the next, creating a playful transition between words.
Wipe
Text is progressively revealed with a wipe animation, creating an effect similar to typing.
Blur
Text blurs as it enters and exits, creating a softer transition between messages.
Each animation creates a different visual feel. Try a few options to find the one that best suits the typography and overall direction of your design.
Adjust the animation speed and timing
Beyond choosing an animation style, Text Loop gives you control over how quickly your text appears, how long it remains visible, and how it transitions out.
There are three main timing settings to consider.
Entry speed
Entry speed controls how quickly or slowly the new text animates into view.
A faster entry creates a more immediate transition, while a slower entry gives the animation a more gradual feel.
Exit speed
Exit speed controls how quickly the current text animates out before the next message appears.
You can adjust this independently from the entry speed.
For example, you might choose a slow fade-in followed by a quick fade-out to create a more distinctive rhythm.
Transition delay
Transition delay determines how long each word or phrase stays visible before the next animation begins.
A shorter delay creates a faster-moving sequence, while a longer delay gives visitors more time to read each message.
Design tip: Set your transition delay with your longest phrase in mind. A single word can be read quickly, but a full sentence needs more time. Giving each message enough time to be read will make the animation feel more considered.
Experiment with the three settings together to create a sequence that feels natural within your design.
Creative ways to use Text Loop on your Squarespace website
Text Loop can do more than animate a single word. Depending on how you structure your content, it can support different design ideas across a client website.
Here are a few ways to put it to use.
1. Create dynamic hero headings
Hero sections are a natural place to introduce rotating text.
Instead of using a single static headline, keep part of your message consistent while cycling through different words.
For example:
Designed to [inspire / connect / create].
This allows you to introduce multiple ideas within one heading while maintaining a consistent layout.
2. Highlight different services
For businesses offering several services, rotating text can help introduce different areas of expertise without listing everything in one heading.
For example:
Helping you with [branding / web design / creative direction].
This can be useful when you're designing a service-focused website and want to give several offerings space within the same section.
3. Rotate through full statements
Text Loop isn't limited to individual words.
By applying strikethrough to an entire heading, you can replace the full sentence with a sequence of different messages.
For example:
Thoughtful design for ambitious brands.
Creative websites built with purpose.
Digital experiences with personality.
Each statement appears in the same text area, allowing you to introduce multiple messages through one animated element.
4. Add movement to portfolio or showcase sections
Rotating text can also introduce different themes or creative disciplines within a portfolio.
A heading could cycle through terms such as:
Identity. Digital. Editorial. Motion.
This creates a simple animated detail that complements the work being presented without requiring a more elaborate layout.
5. Create a more expressive typography treatment
Text Loop can also be used as a design element in its own right.
Try combining a larger heading with a contrasting text color and a carefully chosen animation style.
A subtle fade might suit a minimal design, while a flip or wipe animation could work well for a more playful creative direction.
The key is to make the movement feel intentional and consistent with the rest of the site.
Make your typography work harder
A well-placed animation can bring another layer of personality and movement to a Squarespace website.
With Text Loop, you can turn a single text block into a rotating sequence of words, phrases, or headings, all while keeping control over the animation style and timing.
Whether you're creating a dynamic hero heading, highlighting multiple services, or experimenting with more expressive typography, it's a practical way to add custom movement without writing code.
Ready to try it?
Explore Text Loop inside the SquareKicker Extension and see how a few small changes to your typography can create a more dynamic design on your next Squarespace project.
