motion-reveal

Animates its content in when it enters the viewport. Uses IntersectionObserver with spring-based fade and lift.

Preview

Scroll to reveal

Import

Usage

Properties

Attribute Property Type Default Description
duration duration number 0.6 Spring duration hint in seconds
y y number 24 Initial vertical offset in px
threshold threshold number 0.1 IntersectionObserver visibility threshold (0–1)
once once boolean true Animate only on first intersection

JavaScript API

Trigger the reveal programmatically with play(), cancel(), and replay().

Reveal from JavaScript

Accessibility

Respects prefers-reduced-motion: when enabled, the reveal animation is skipped and content appears immediately at its final state.