Skip to content

Scroll-reveal: add --stagger, -all (children), blur and parallax variants #522

Description

@jackgranatowski

Problem

.sf-entrance--* (fade/fade-up/-down/-left/-right/scale-up) ships and is scroll-driven via animation-timeline: view(). It's missing the higher-value scroll-reveal ergonomics: staggering a group of children, applying to all direct children at once, and blur/parallax flavours.

Scope

  • --stagger progressive child delay (CSS sibling-index() is within our browser floor).
  • -all variant that applies the effect to direct children of a container.
  • New effect flavours: --blur (blur→sharp) and --parallax.
  • All gated on prefers-reduced-motion; graceful fallback (immediate show) where view() is unsupported, as today.

Acceptance

  • .sf-entrance-all--* + --stagger working without JS
  • blur + parallax variants
  • Reduced-motion safe + documented

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions