Timed Transitions
What You'll Create
Add an auto-cycling visual display to your Squarespace site where a section automatically transitions through different visual states on a configurable timer. Each state can change the section's background color, reveal specific images, and restyle text — all driven by a data attribute that increments at your chosen interval. The number of states and timing are controlled entirely through the section's anchor slug, so no code editing is needed to adjust the cycle.
The Problem It Solves
Squarespace doesn't offer timed visual transitions within a single section. Slideshows can auto-advance, but they lock you into gallery layouts with no control over background colors, text styling, or which individual elements are visible per state. This technique turns any Fluid Engine section into a state machine — each interval triggers a style change that can restyle anything in the section.
Perfect For
Hero section image rotations, Background color mood cycling, Product feature showcases with timed reveals, Brand storytelling with phased visual changes, Homepage visual variety without user interaction
What Makes This Different
The anchor format {n}-timedlapse-{s} controls everything — n sets the total number of states, s sets the seconds between transitions. The script reads this anchor, then uses a repeating timer to cycle through each state automatically. Each state is independently styled with CSS — for example, state 2 can switch the background to a deep burgundy (#64221C) and heading text to a soft blush (#EDCBBE), while revealing a specific image matched by its alt text. Images are hidden by default outside of edit mode and fade in over 0.5 seconds when their state becomes active. The entire system is scoped per section, so multiple timed sections can run independently on the same page — each with different state counts and intervals.
Details
Section Type: Fluid Engine
Code Type: CSS + JavaScript
Prerequisites: Fluid Engine section with anchor in the format
{n}-timedlapse-{s}(e.g.3-timedlapse-5for 3 states every 5 seconds). Images with alt text to target per-state visibility. JavaScript in footer code injection.Toolkit Title: Timed Transitions
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