Animate On Scroll Plugin

What Animate On Scroll Plugin is

Animate On Scroll Plugin is a low cost script from Squarewebsites that animates blocks, gallery slides or summary items into view as a visitor scrolls down a Squarespace page. It is one of the older, simpler plugins in their catalogue and it is configured in code rather than through a panel. The old listing on this page described an intuitive customisation interface with no coding; that is not how this plugin works. You paste the script and style into your injection tabs, then write a short configuration object that names the container, the items and the effect.

What it does

The config takes a CSS selector for the scroll container (a summary block, a gallery block or any section), a selector for the items inside it, an effect name, an easing function, minimum and maximum durations (a random value between them is used if you set both), a viewport factor that decides how much of the element must be visible before it animates, and a reverse flag to re-animate items when they scroll back. Effects include fadeIn, scaleUp, moveUp, flip, rotate, four diagonal rotate variants and the "bes" family (besUp, besDown, besLeft, besRight, besOpen), which wipe an overlay colour off the item as it appears. You can run several configs on one page for different blocks, and the product page has a live playground for each effect.

Who it suits

Designers and developers comfortable with a CSS selector and a few lines of JavaScript who want scroll reveals on summary grids, galleries or feature sections without paying for a full animation suite. At its price it is a sensible first step into motion on a client site if you already do code injection.

One honest caveat

It is not a no code tool, and it is old. Configuration is by hand, selectors change when Squarespace updates block markup, and the product page still uses 7.0 era block IDs in its examples, so budget time to test on a 7.1 Fluid Engine site before promising a client. There is no visual editor, no per block toggle and no documented licence terms on the product page, so ask Squarewebsites about multi site use.

Setup

You need a Squarespace plan with code injection, which means Core or higher. Add the script and stylesheet to the header injection, then a config snippet (per page or site wide) naming the container and items to animate. The vendor page states no licence terms, so confirm single or multi site use with Squarewebsites before buying for client work.

Related guide

Compare it with the other motion tools in the Squarespace animation plugins sub-collection, browse the full plugins collection, or read my roundup of the best Squarespace plugins in 2026.