# Motion demo settings and review notes

Original GSAP browser example from Derrick.dk, 11 October 2026.
Not an exported Webflow interaction or a performance benchmark.

## Explicit parameters

Elaborate: 64px vertical travel, opacity 0 → 1, 0.85-second duration per card, 0.25-second stagger. Three cards finish at a planned 1.35 seconds.
Small: 8px vertical travel, opacity stays at 1, 0.22-second duration per card, 0.05-second stagger. Three cards finish at a planned 0.32 seconds.
Both use GSAP power2.out, run once on request and leave all content in the base HTML. Neither controls the page’s scroll. Keyboard focus finishes the active reveal.

## Preference rules

System prefers-reduced-motion always takes priority. The local off switch can additionally stop motion; it cannot force motion for somebody who requested reduction. Matched animations are reverted when the preference or setup changes. Test the still state as content, not just as a setting.

## Review in your actual site

Identify native GSAP interactions, Classic Interactions and custom code separately. Test the published page with all its scripts and assets. Keep the task, browser/device, expected result, actual result and evidence. A screenshot shows a frame and a viewport; it does not establish frame rate, physical phone support or a conversion result.

GSAP documentation: https://gsap.com/docs/v3/GSAP/gsap.matchMedia/
Webflow motion guidance: https://help.webflow.com/hc/en-us/articles/42466201896083-Use-thoughtful-motion-and-animation
