Scroll Animation

Scroll-driven animation utilities for progress indicators and viewport-triggered effects. Wrapped in @supports — no impact on unsupported browsers.

Scroll Progress Indicator

Scroll down to see the progress bar fill.

Base

Class	Description
`.ui-scroll-animation`	Base class

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-scroll-progress-height`	`var(--ui-space-half)`	Scroll progress indicator height
`--ui-scroll-progress-bg`	`var(--ui-color-primary)`	Scroll progress indicator color

View Fade

I fade in on scroll

<!-- Elements fade in as they enter the viewport. -->
<div class="ui-view-fade ui-card ui-card--sm">I fade in on scroll</div>

View Slide Up

I slide up into view

<!-- Elements slide up and fade in on viewport entry. -->
<div class="ui-view-slide-up ui-card ui-card--sm">I slide up into view</div>

View Slide Start

I slide from the start

<!-- Elements slide in from the start edge (left in LTR) on viewport entry. -->
<div class="ui-view-slide-start ui-card ui-card--sm">I slide from the start</div>

View Scale

I scale into view

<!-- Elements scale up and fade in on viewport entry. -->
<div class="ui-view-scale ui-card ui-card--sm">I scale into view</div>