How to Create a Wavy Marquee Effect with Squarespace Scrolling Block

What You'll Create

A wavy, curved marquee effect using Squarespace's native scrolling text block. Instead of scrolling in a straight line, your text flows along a wave-shaped path with a colored outline that follows the curve—creating an eye-catching, organic scrolling animation.

The Problem It Solves

Squarespace's scrolling text block only moves in a straight horizontal line. If you want that trendy wavy text effect you see on creative agency sites, there's no built-in option. Third-party solutions often require complex setup or external tools.

Perfect For

Creative portfolio headers, Agency homepage accents, Event and festival sites, Fashion and lifestyle brands, Artistic statement sections

What Makes This Different

This technique works with Squarespace's native scrolling block—you don't need to build anything from scratch. A small script repositions elements to make the wave effect visible, while styling creates the curved outline that follows your text. The background color you set in Squarespace's block settings automatically becomes the outline color, keeping everything on-brand. You can scope it to specific sections if you only want certain marquees to be wavy.

Details

• Section Type: Fluid Engine

• Code Type: CSS + JavaScript

• Prerequisites: Scrolling text block with background color enabled

• Toolkit Title: Wavy Marquee (scrolling block)

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support