Reference

Motion

Entrance presets on the token durations, staggered with sibling-index(); all of it off under reduced motion.

Entrances.

Stagger siblings with data-stagger (via sibling-index()) or a manual --i.

Presets: .animate-fade-in .animate-slide-up.animate-slide-down .animate-scale-in .animate-spin.animate-blink. Delays: .delay-1 … .delay-5, one --ae-stagger apart (φ⁻³ of --ae-duration, ≈ 52 ms).

.animate-slide-up
.animate-slide-up · 2
.animate-slide-up · 3
.animate-fade-in .delay-3
.animate-scale-in .delay-4
.animate-spin· .animate-blink

Scroll-driven.

No JavaScript: both run on animation-timeline and do nothing where it is unsupported or motion is reduced.

[data-reveal] Fades, rises and unblurs as the element enters the viewport (from 5% to 55% of its entry).
.parallax Drifts with page scroll. --depth from -1 (slower) to 1 (faster), default 0.5.
data-reveal
data-reveal
data-reveal
Jump to
ProportionFoundations
MaterialFoundations
PresetsFoundations
ShellLayouts · Application
Container and stacksLayouts · Pages
SplitLayouts · Pages
Grid, bento, masonryLayouts · Pages
Switcher and rowLayouts · Pages
↑↓Move↵OpenescClose