Reveal
@stellaria/nebula-webRevealPropsPreview
Props
11| Prop | Type | Default |
|---|---|---|
amount How much of the element has to be visible before it fires, from 0 to 1. Keep it low for tall blocks: an element taller than the viewport can never reach a high threshold, and would never reveal at all. | number | 0.2 |
children What is revealed. It is never hidden by the stylesheet: the hidden state is applied from the client only once motion is known to be allowed, so with JS off, without an `IntersectionObserver`, or under reduced motion the content is simply there. | ReactNode | — |
className | string | — |
component The element it paints. It swaps the root for its animated twin rather than wrapping it, so this component adds no node — which is what lets it sit between a grid and its items. | ElementType | "div" |
duration Length of the entrance in milliseconds. Ignored when `spring` is set. | number | — |
index Position in a stagger, which delays this one relative to its siblings. Pass the map index over a list; the delay is capped, so a long list does not end with an element waiting seconds. | number | — |
once Whether it reveals once and stays. Turning it off makes content re-animate every time it re-enters the viewport, which reads as flicker on a page the user scrolls back up. | boolean | true |
preset Which way it enters. Same seven presets as `Transition`, with a different trigger: that one fires on `mounted`, this one on coming into view. | TransitionPreset | "slide-up" |
rootMargin The observer's root margin. The default pulls the trigger line 10 % up from the bottom edge, so the entrance starts before the element is flush with the fold rather than after. | string | "0px 0px -10% 0px" |
spring Uses a theme spring instead of a tween, which leaves `duration` unread. | SpringName | "gentle" |
style | CSSProperties | — |
Also accepts
On top of its own props, this component forwards these groups.