Introducing Adagio: Scroll-Driven Animations for Memorable Squarespace Websites

Adagio is an advanced scroll animation system designed specifically to bring immersive, scroll-driven features to your Squarespace website.

1. Intro

2. Installing Adagio

Introducing Adagio: Scroll-Driven Animations for Memorable Squarespace Websites

a.
Squarespace
b.
Animations

There are millions of websites out there, so how do you make yours unforgettable? That’s the question that led me to create Adagio — an advanced scroll animation system designed specifically to bring immersive, scroll-driven features to your Squarespace website.

And with Squarespace soon launching a native way to animate block elements, I figured now's the perfect time to introduce even more advanced, section-based scroll animations that work beautifully in tandem with the upcoming native features.

What Are Scroll-Driven Animations?

Scroll-driven animations are a type of website animation where the movement of elements is directly based on the user’s scroll position.

Take the beautiful Cosmos website as an example — elements start to move as soon as you hit certain sections, and their speed or transformation depends on how fast you scroll. Apple has also mastered this technique in their product pages, making users feel like they're unwrapping a product as they scroll.

When crafted well, these animations can transform your website into a story — an unfolding experience rather than a static presentation.

Meet Adagio — Graceful, Scroll-Based Animations

I wanted to make scroll animations easy and intuitive to implement in Squarespace. That’s how Adagio was born — named after the slow and sweeping expression of grace in music and dance.

Head over to CasaAdagio.com to explore a showcase of what's possible.

A Tour Through Casa Adagio

As you land on the page, you're greeted by a clock-inspired graphic that slowly rotates to reveal the brand’s colors. A message reads: "Take time as you scroll." This isn't just poetic — it’s instructional. Slow scrolling reveals the magic.

Highlights from the Demo:

Split Characters: As you scroll, text is slowly revealed letter by letter.

Stroke Animation: Custom graphics created in Figma are revealed in sync with your scroll.

Audio Integration: Click ‘Play Audio’ to enhance your experience with ambient music — toggled on or off, stuck at the bottom right of your screen.

Scroll-Synced Video Shifts: Full-width videos subtly transition between blocks as you scroll, creating a seamless storytelling effect.

Installing Adagio: Quick & Flexible

Installing Adagio is effortless. Here’s how it works:

Step 1: Install the Catalog

You can set it up in seconds — a simple code adds the entire animation system to your Squarespace site.

Step 2: Activate Specific Effects

You don’t have to activate everything. Use the visual guide to pick and activate only the effects you want — with just one line of code.

For example, to activate horizontal scrolling sections, all you need to do is add keywords to your section anchors:

• Add HL start to the first section

• Add HL end to the last section

Adagio automatically calculates the scroll length based on how many sections are included. No code editing required.

Scroll Animation Techniques in Adagio

Here’s a rundown of the scroll-driven animation types available:

1. Horizontal Image Scroll

Using Fluid Engine + Gallery Blocks, the images scroll horizontally. The scroll length adjusts based on how many images are in the gallery.

2. Draw on Scroll (SVG Reveal)

Create custom SVGs in Figma, Illustrator, or Adobe XD. These graphics reveal themselves as users scroll. Combine them with split-character text effects for layered impact.

3. Horizontal Scroll by Section

Assign full Fluid Engine sections to horizontally scroll. Add any type of content: images, videos, galleries, or lists.

4. Moments of Delight

Interactive hover animations — items bounce and respond dynamically as you hover over them.

5. Mouseover Reveal

Using just a gallery block, images swap based on mouse movement. It's great for showcasing portfolios in a clean, engaging way.

6. Circular 3D Scroll

Use list sections to create a 3D scroll wheel effect — perfect for displaying list items in a unique format.

7. Curved Horizontal Scroll

Another list-section-based animation, this one adds a soft curve to the scroll for a more dynamic look.

Block-Level Animations

Although Squarespace will soon have native block animations, I’ve added custom effects in Adagio that go beyond what the native tools can offer.

For example:

Split Text Animation: Add keywords like character split directly in your text block link (in edit mode), and the animation is applied automatically.

Customize stagger timing by adding a value (e.g., stagger:03) to control how fast each letter appears.

Scrollytelling System Built for Squarespace

What makes Adagio truly special is how it brings advanced animation techniques to your Squarespace site without requiring code editing. You simply:

• Add specific keywords to sections or blocks

• Use the visual guide to activate effects

• Customize effortlessly through section or block IDs

If you're curious to dive deeper, check out my free workshop on Scrollytelling — where I walk through how to design memorable Squarespace websites using scroll animations.