Idea
Ship a tiny front-end script that uses IntersectionObserver to add the framework's .is-visible class (or a data attribute) to elements as they enter the viewport — enabling "animate once when visible, stay visible" reveals that the pure-CSS framework intentionally doesn't provide.
Why
Scroll reveals are extremely common on marketing pages. The framework is zero-runtime-JS by design, so this belongs in the plugin. The CSS hook (.is-visible state) already exists.
Scope
- Small, dependency-free script, opt-in, honouring
prefers-reduced-motion.
data-* to skip/configure threshold + stagger per element.
- Enqueue only when the feature is enabled.
Acceptance
Idea
Ship a tiny front-end script that uses
IntersectionObserverto add the framework's.is-visibleclass (or a data attribute) to elements as they enter the viewport — enabling "animate once when visible, stay visible" reveals that the pure-CSS framework intentionally doesn't provide.Why
Scroll reveals are extremely common on marketing pages. The framework is zero-runtime-JS by design, so this belongs in the plugin. The CSS hook (
.is-visiblestate) already exists.Scope
prefers-reduced-motion.data-*to skip/configure threshold + stagger per element.Acceptance
.is-visibleon first entry (no reversal on scroll-back), reduced-motion safe, opt-in