[ @sdxc/ui/animations ]
viewReveal
Plays a translate-and-fade entry as the element scrolls into view; out and back replays it.
import { viewReveal } from "@sdxc/ui/animations";Usage
Plays a translate-and-fade entry as the element scrolls into view; out and
back replays it. @keyframes names are document-global, so one shared set
reads its distance from a custom property, mirrored under :dir(rtl).
Signature
viewReveal(options?: ViewReveal.Options): CSSMixinDescriptorReturns a style mixin, applicable through a host element's mix prop.
Parameters
| Parameter | Type | Description |
|---|---|---|
options? | ViewReveal.Options | Tuning for the reveal's direction, distance, and range. |
Examples
mix={viewReveal({ from: "inline-start", distance: "2rem" })}Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/animations too.
Interface
ViewReveal.Options
Options tuning an element's entry motion as it scrolls into view.
| Member | Type | Description |
|---|---|---|
from? | Direction | Logical edge the element translates in from. Defaults to "block-end" — the element rises into place, matching the most common reveal-on-scroll convention. |
distance? | string | CSS length the element starts offset by. Ignored when from is "none". Defaults to "1.5rem". |
axis? | "block" | "inline" | Scroll axis the element's view-timeline progresses along: "block" for a vertically scrolling page or panel, "inline" for a horizontally scrolling one, such as a Carousel. Defaults to "block". |
range? | string | Named view-timeline range the reveal completes over. Defaults to "entry" — the reveal finishes once the element has fully entered the scrollport and stays settled for the remainder of scroll. |
Type
ViewReveal.Direction
Edge an element's entry motion translates in from, expressed as a
logical direction so it stays correct under both writing directions.
"none" fades the element in place.
type ViewReveal.Direction = "block-start" | "block-end" | "inline-start" | "inline-end" | "none"