[ @sdxc/ui/animations ]
scrollFade
Fades a scroll container's own edges through a mask on the scrolling element itself.
import { scrollFade } from "@sdxc/ui/animations";Usage
Fades a scroll container's own edges through a mask on the scrolling element itself: each edge reads opaque once scroll reaches it and feathers while content lies beyond. Without scroll timelines both edges stay faded.
Signature
scrollFade<node extends Element = Element>(options?: ScrollFade.Options): UtilityMixin<node>Returns a style mixin, applicable through a host element's mix prop.
Parameters
| Parameter | Type | Description |
|---|---|---|
options? | ScrollFade.Options | Selects the scroll axis the fade tracks and how wide each faded band reads. |
Examples
<MessageScroller.Viewport mix={scrollFade({ axis: "block" })}>
{messages}
</MessageScroller.Viewport><Attachment.Group mix={scrollFade({ axis: "inline", size: "2rem" })}>
{attachments}
</Attachment.Group>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/animations too.
Interface
ScrollFade.Options
Options tuning which edges a scroll container's own mask-driven fade tracks and how wide each faded band reads.
| Member | Type | Description |
|---|---|---|
axis? | "block" | "inline" | Scroll axis the fade's timeline attaches to: "block" fades the top and bottom edges of a vertically scrolling list, "inline" the start and end edges of a horizontally scrolling row. Defaults to "block". |
size? | string | CSS length each faded band extends inward from its edge. Defaults to "3rem". |