Skip to content

Proposal: vanilla scroll-reveals emitter (IntersectionObserver + CSS) to complement the motion emitters #130

Description

@ThiagoMafra-Integrare

The motionlang line (Motion Lab, Framer Motion, Motion One) is great for React /
library-driven motion. There's a gap for the simplest, most portable case:
on-scroll reveals (fade / slide / scale on viewport entry) as dependency-free
vanilla JS + CSS that a user can paste into any stack.

Proposal — a new scroll-reveals formatter that emits, from the already-captured
design.motion:

  • a tiny IntersectionObserver toolkit that observes [data-reveal] elements and toggles .is-revealed on threshold cross (respects data-reveal-once);
  • a CSS variant sheet (fade, slide-up/-down/-left/-right, scale, + stagger), parameterised by calibrated custom props (--reveal-duration, --reveal-ease, --reveal-distance, --reveal-stagger) derived from the dominant opacity/transform timing the extractor already captures;
  • a short report + a demo HTML page (visual proof, paste-ready reference).

Usage is attribute-driven: data-reveal="slide-up", data-reveal-stagger on a
container, data-reveal-once="false" to repeat.

This sits at "Level 1" (DOM-legible reveals) and complements the existing emitters
rather than overlapping — it targets the no-framework case. It follows the
"prefer pure JS, no extra deps" guideline and fits the src/formatters/ module
shape. Calibration is honest: the source capture is aggregated, so the emitter is a
calibrated toolkit (sensible documented defaults for threshold/once), not a
per-element clone.

If there's interest, I'd open a single focused PR (formatter + tests + api.js
registration + the 3 artifacts), tested against 2-3 real sites per CONTRIBUTING.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions