Element: #325 Pinned step story (motion/scroll)
What it shows: A pinned media panel on the left changes its figure and caption as each step on the right scrolls through the middle of the frame; the step in view has the primary title colour, the others the secondary one.
When to use: Explaining a product flow: connect, sort, review. One visual stays on screen while the copy advances.
Spec:
- `MotionStage` from `@codeatlasdev/ui` with `loop={5600}`: autoplay scrolls the container, a wheel or touch scroll takes over
- `.story__media` is `position: sticky;` with `inset-block-start: 0;` and pins the media while the steps list scrolls past
- `IntersectionObserver` with `rootMargin: '-45% 0px -45% 0px'` makes the step crossing the middle 10% band the active one
- Figure transition: `opacity 320ms cubic-bezier(0.2, 0, 0, 1)` and a `translateY(12px) scale(0.96)` start state
- The active step title is `var(--ca-text-primary)`, the others `var(--ca-text-secondary)` (a colour change, never a lower opacity, so every state stays AA)
- Under reduced motion the last step is active and nothing scrolls by itself
Motion:
- opacity, transform: translateY, scale (media figure): 320ms cubic-bezier(0.2, 0, 0, 1)
- color (step title, secondary to primary): 320ms cubic-bezier(0.2, 0, 0, 1)
Names: Pinned step story | Sticky scrollytelling | Scrollytelling fixo por etapas | Récit épinglé par étapes
Tags: motion, scroll, pinned, sticky, steps, storytelling
Needs: @codeatlasdev/ui@4.6.0
Components: MotionStage
Live demo: https://ui.codeatlas.com.br/docs/motion/scroll#pinned-step-story
{#snippet children(m)}
{@const cur = m.reduced ? steps.length - 1 : active}