How to Add a Scrolling Text Animation in Squarespace — No Coding Required
You have seen it. That smooth, full-width text gliding across a screen in opposite directions, moving in perfect sync with the scroll.
You assumed it was reserved for brands with a developer on speed dial and a five-figure design budget. It is not. If your site is on Squarespace 7.1 — whether you are a coach, photographer, course creator, consultant, freelancer, content creator, planner or service provider — this guide shows you exactly how to add it. Five minutes. Zero coding. Maximum impact.
Why should You care?
What Is a Scroll Marquee Animation
Why is this one different from every other scrolling text effect you have seen out there? It is fully scroll-driven. That means it only moves when your visitor scrolls, and it responds directly to them. Scroll fast, it moves fast. Scroll slow, it moves slow. Scroll back up; it reverses.
This is where the magic happens. It looks considered. It looks premium. And your visitors feel it before they even register what they are looking at.
Copy. Paste. Done.
Watch your site come alive.
Your Website Shouldn't Just Look Good — It Should Work Hard
Here is the truth about websites for small business owners and creative entrepreneurs: your site is your best salesperson. It never sleeps, never forgets a detail, and makes a first impression every single time someone lands on it.
The scroll marquee is not just a pretty effect — it is a strategic design choice that communicates quality, intentionality, and brand confidence the moment a visitor arrives.
What You'll Need
A Squarespace 7.1 website — this does not work on Squarespace 7.0
The Scroll Marquee Animation — get it right HERE
That is it. No plugins. No apps. No developer. No CSS panel. Just one code block, pasted once.
What to Actually Put in Your Marquee
Because staring at a blank text field is nobody's favourite activity — here are ideas by the audience:
Coaches and consultants - Your signature programme name · A belief that drives your work · Your core methodology · A question your ideal client whispers to themselves at 2 am · Your transformation promise
Photographers and creatives - Your studio name · Your location and speciality · A mood word that defines your aesthetic · The feeling you create for your clients · Your brand tagline
Course creators - Your course name · The transformation you deliver · An enrolment call to action · A student result that speaks for itself · Your framework name
Content creators and influencers - Your niche · Your community name · A bold brand value · The thing you are undeniably known for · Your tagline
Freelancers and service providers - Your service · Your speciality · What makes your process different · What you stand for · A result you consistently deliver
Planners - Your business name · Your signature offering · The feeling you create for clients · A mood word for your brand · Your speciality
How to Install It — Copy. Paste. Done.
Step 1 — Grab the code. Purchase the Scroll Marquee Animation HERE and receive it instantly.
Step 2 — Head to the page where you want the marquee to live. Click the + button to add a new block. Choose Code from the menu. (It sounds more technical than it is — it is just another block, like a text block or an image block.)
Step 3 — Paste and save. Paste the full code into the block editor. Make sure the block type in the top left corner is set to HTML. Click Apply or Save.
Step 4 — Make it yours. All your settings are clearly labelled at the very top of the code. Change your text, pick your heading size, set your speed, and custom delimiter. Done. Your text animation is live.
How to Customise It — No Coding.
All settings sit at the very top of the code, labelled in plain language. You change the text inside quotation marks. That is the whole job, nothing complicated here.
Heading style — type h1, h2, h3, or h4. The marquee automatically pulls your Squarespace font for whichever heading level you choose. No manual font setting. It just works.
Line 1 text — the text that travels right to left. This is your headline moment. Make it yours.
Line 2 text — the text that travels left to right. Run the same phrase as line 1 for a hypnotic mirrored effect, or use something different for contrast and narrative. Both work brilliantly — it depends on your brand personality.
Speed — 0.3 is slow and editorial, premium feel. 0.8 is fast and energetic.
Delimiter — choose your custom delimiter. You can choose any copy-paste symbol available online. Express yourself here :-)
Word gap — the breathing room between each repeated phrase on a line. More gap, more air. Less gap, more density. You will know your brand when you see it.
Row spacing — the space between the two lines. Pull them together for a bold typographic block. Open them up for something more editorial and considered.
Want two marquees on the same page? Paste the code a second time and change one number at the very top from 1 to 2. Third marquee, change it to 3. That single number change is all that stands between you and as many marquees as your page can hold.
This Scroll Marquee is the five-minute upgrade that makes your website feel like it was built by a premium design studio
How to Get the Most Out of It
Add your custom separator between your repeated words, A · or — or / between repetitions, makes the loop look designed rather than accidental. Studio Name · Studio Name · feels crafted. One character. Big difference.
Try the same text on both lines before you get clever. The mirrored effect — same phrase, opposite directions — is almost always more powerful than two different phrases. It creates a hypnotic quality that is very hard to look away from. Start here.
Use it as a section divider. Placed between two content sections, the marquee creates pacing and rhythm. It gives your visitor a micro-moment of delight between reading blocks of content — and those micro-moments are what make a site memorable.
Match speed to brand personality. Slow speed = refined, considered, premium. Fast speed = energetic, bold, personality-forward. Neither is better. Both are intentional. Pick the one that sounds like you when you are at your best.
Go big with H1 for a hero moment. Set the heading style to H1, increase your row spacing, and let it breathe. At full scale, the marquee becomes a typographic centrepiece that is very hard to scroll past — which, let us be honest, is exactly the point.
Frequently Asked Questions
-
Hard no. If you can edit a Google Doc, you can customise this. Everything you need to change is labelled, at the top, in plain language. Nothing else needs to be touched.
-
Yes. The animation adjusts automatically to the actual screen width.
-
Yes — and this is one of the things that makes this effect genuinely seamless. The code reads your Squarespace heading styles directly. Your fonts, your sizes, your brand. No extra steps, no manual matching.
-
No — Squarespace 7.1 only. If you are not sure which version you are on, check your Squarespace settings under Design.
-
Yes — homepage, about page, services page, sales page, landing page, anywhere your heart desires.
-
Yes. Change one number at the top of each pasted instance — 1, 2, 3 — and each runs completely independently.
This animation is part of a growing collection of Squarespace 7.1 code block animations and effects — built for small business owners, coaches, photographers, course creators, consultants, freelancers, content creators, planners and service providers who want a premium-feeling site without the premium price tag.
