A reveal-as-you-scroll stage

The simplest version of the "stay pinned while content changes underneath" look — a short section that pins a title in place while a short list of feature callouts fades in beside it, one at a time, as the visitor scrolls. It's the quickest way to see "I am parent" and "Get parent" (Pinned scenes) working together, end to end, before building something larger.

Structure

section .stage-section     "I am parent" · height: 300vh · padding: 0
└─ div .stage               position: sticky · top: 0 · min-height: 100vh
   ├─ h2                    the pinned title — no animation, stays as-is
   └─ div .stage__item ×3   "Get parent" + an entrance animation each (e.g. Fade in)

.stage-section { padding: 0; overflow-x: hidden; }
.stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  gap: 48px;
}

Each .stage__item gets its own Start/End window on the 0–100% scale the section's 300vh gives you (see the pinned window table) — for example 25–45, 45–65 and 65–85, so the three items reveal one after another as the section scrolls past.

Bricks

On the section: Style tab → ScrollTrigger Animations → I am parent container. On each .stage__item: Get parent, plus an Entrance Animations row (Fade in works well) with its own Start/End.

Etch

Same two settings and the same entrance animation, in the matching Fancy panels for the section and for each item.

Gutenberg

Same two settings, in the block sidebar's Fancy panel for the section block and for each item block.

Video walkthrough

Recorded in December 2024. The panel looks different today; the idea it explains still applies.