Scroll-reveal animation engine with a 44-animation catalog, stagger, once/repeat triggers, thresholds and reduced-motion awareness.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-reveal/latest/gs-reveal.min.css"> <script src="https://cdn.get-set.it/gs-reveal/latest/gs-reveal.min.js"></script>
import Reveal from '@get-set/gs-reveal'; export default function App() { return ( <Reveal> <div className="content">Your Reveal content</div> </Reveal> ); }
Options re-run the animation instantly.
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Reference. |
| animation | GSRevealAnimation | false | 'fade-up' | Entrance animation name from the catalog. `false` disables all motion (the element just appears). Default: 'fade-up'. |
| duration | number | 600 | Animation duration in ms. Default: 600. |
| delay | number | 0 | Delay before the reveal starts, in ms. Default: 0. |
| easing | GSRevealEasingParam | 'smooth' | CSS easing (named preset or raw timing-function). Default: 'smooth'. |
| distance | number | string | '32px' | Translate distance for directional animations (fade-up, slide-left, …). Number = px; string = raw CSS length. Ignored by non-directional animations. Default: '32px'. |
| origin | GSRevealOrigin | 'center' | Transform-origin pivot for zoom/flip/rotate/skew. Default: 'center'. |
| threshold | number | 0.15 | IntersectionObserver visibility threshold (0..1): the fraction of the element that must be visible to trigger the reveal. Default: 0.15. |
| rootMargin | string | '0px' | IntersectionObserver `rootMargin` (grows/shrinks the trigger box). Accepts any valid CSS margin string, e.g. '0px 0px -10% 0px'. Default: '0px'. |
| root | HandlerTarget | none | Scroll container the observer watches. selector | HTMLElement | React ref. Defaults to the browser viewport. |
| once | boolean | true | Reveal only once (default). When `false`, the element re-hides when it leaves the viewport and re-reveals on the next entry (repeat mode). |
| mirror | boolean | false | Animate the element back out when it leaves the viewport (upward or downward). Implies repeat behaviour. Default: false. |
| staggerChildren | boolean | false | Reveal direct children sequentially instead of the element itself. When enabled, each child is observed/animated with an increasing delay. Default: false. |
| stagger | number | 100 | Per-child (or per-group) stagger step, in ms. Default: 100. |
| staggerSelector | string | none | CSS selector for the children to stagger (relative to the container). Defaults to direct children (`:scope > *`). |
| staggerMax | number | none | Maximum cumulative stagger delay in ms (clamps long lists). Default: none. |
| disabled | boolean | false | Disable the plugin entirely: the element is shown immediately with no observer and no animation. Default: false. |
| reducedMotion | 'auto' | boolean | 'auto' | Honor `prefers-reduced-motion`. 'auto' follows the OS setting; `true` always reduces (reveal is instant); `false` never reduces. Default: 'auto'. |
| theme | GSRevealTheme | 'auto' | Visual theme applied to the wrapper. `auto` follows prefers-color-scheme. Default: 'auto'. |
| accentColor | string | none | Accent color token (CSS var --gsr-accent) for built-in scaffolding. |
| rtl | boolean | false | Right-to-left layout (mirrors left/right directional animations). Default: false. |
| className | string | none | Extra class name applied to the reveal element/wrapper. |
Fades, slides, zooms, flips and more.
Cascade grouped children on entrance.
Once or repeat with custom thresholds.
Respects prefers-reduced-motion automatically.