Everything you can write
Everything visual — the marker, the effect, the timing — is a
class. The data-reveal-* attributes control behavior
only, each overriding the matching init() option for
that element.
| Class | Value | What it does |
|---|---|---|
revealrequired
|
marker | Marks the element for observation. Effect classes do nothing without it. |
reveal-<effect> |
effect |
reveal-fade, reveal-fade-up,
reveal-fade-down,
reveal-fade-left,
reveal-fade-right,
reveal-fade-up-right,
reveal-fade-up-left,
reveal-fade-down-right,
reveal-fade-down-left,
reveal-slide-up,
reveal-slide-down,
reveal-slide-left,
reveal-slide-right,
reveal-flip-up, reveal-flip-down,
reveal-flip-left,
reveal-flip-right, reveal-zoom-in,
reveal-zoom-in-up,
reveal-zoom-in-down,
reveal-zoom-in-left,
reveal-zoom-in-right,
reveal-zoom-out,
reveal-zoom-out-up,
reveal-zoom-out-down,
reveal-zoom-out-left,
reveal-zoom-out-right,
reveal-bloom-in,
reveal-bloom-in-up,
reveal-bloom-in-down,
reveal-bloom-in-left,
reveal-bloom-in-right. Defaults to a plain
fade.
|
reveal-delay-<ms> |
0–1000, step 50 |
Transition delay. Other values:
.reveal-delay-90 { --reveal-delay: 90ms }.
|
reveal-duration-<ms> |
100–2000, step 100 | Transition duration. |
reveal-ease-<name> |
linear, in, out,
in-out, spring
|
Easing. Custom:
style="--reveal-easing: cubic-bezier(…)".
|
| Attribute | Value | What it does |
|---|---|---|
data-reveal-offset |
px or % |
Trigger distance above the viewport edge. Overrides the
global offset.
|
data-reveal-once |
true / false |
Reveal once, or re-hide on every crossing. Overrides the
global once.
|
data-reveal-anchor |
CSS selector | Use another element as the trigger. Elements sharing an anchor reveal together. |
data-reveal-anchor-placement |
placement |
Which trigger edge meets which viewport edge —
top-bottom, center-center, etc.
|
data-reveal-group |
name:step-ms |
Auto-staggered delays — each reveal wave cascades from 0 in
steps of step-ms.
|
<div class="reveal reveal-fade-up reveal-delay-150 reveal-duration-800 reveal-ease-spring"
data-reveal-offset="20%" data-reveal-once="false">
…
</div>
Each card is its own effect
Each effect is a CSS resting state the element transitions out of.
The JS only adds is-revealed — CSS does the rest.
fade
Fade
Opacity only.
reveal-fade
Fade up
Rises into place from below.
reveal-fade-up
Fade down
Settles down from above.
reveal-fade-down
Fade left
Travels in from the right.
reveal-fade-left
Fade right
Travels in from the left.
reveal-fade-right
diagonal
Fade up right
Arrives from the lower left.
reveal-fade-up-right
Fade up left
Arrives from the lower right.
reveal-fade-up-left
Fade down right
Arrives from the upper left.
reveal-fade-down-right
Fade down left
Arrives from the upper right.
reveal-fade-down-left
slide
flip
Flip up
Hinges forward on its bottom edge.
reveal-flip-up
Flip down
Hinges back on its top edge.
reveal-flip-down
Flip left
Swings around its left edge.
reveal-flip-left
Flip right
Swings around its right edge.
reveal-flip-right
zoom in
Zoom in
Scales up into place.
reveal-zoom-in
Zoom in up
Grows while it rises.
reveal-zoom-in-up
Zoom in down
Grows on the way down.
reveal-zoom-in-down
Zoom in left
Grows in from the right.
reveal-zoom-in-left
Zoom in right
Grows in from the left.
reveal-zoom-in-right
zoom out
Zoom out
Scales down into place.
reveal-zoom-out
Zoom out up
Scales down while rising.
reveal-zoom-out-up
Zoom out down
Scales down while descending.
reveal-zoom-out-down
Zoom out left
Scales down from the right.
reveal-zoom-out-left
Zoom out right
Scales down from the left.
reveal-zoom-out-right
bloom
Bloom in
Blur to sharp, scaling up.
reveal-bloom-in
Bloom in up
Rises out of a blur.
reveal-bloom-in-up
Bloom in down
Descends into focus.
reveal-bloom-in-down
Bloom in left
Blurred in from the right.
reveal-bloom-in-left
Bloom in right
Blurred in from the left.
reveal-bloom-in-right
A cascade is just delays
All twelve tiles share one anchor and fire at the same instant —
the stagger is just a reveal-delay-* class per tile.
<div class="grid" id="cascade"> <span class="reveal reveal-zoom-in" data-reveal-anchor="#cascade"></span> <span class="reveal reveal-zoom-in reveal-delay-50" data-reveal-anchor="#cascade"></span> <span class="reveal reveal-zoom-in reveal-delay-100" data-reveal-anchor="#cascade"></span> </div>
Smart group delay
Every item shares data-reveal-group="demo-list:50" —
no delay classes. Whatever arrives together cascades from 0, so
items further down start fresh waves instead of carrying
accumulated index delays.
<!-- in a loop — no index in sight -->
<div class="reveal reveal-fade-up" data-reveal-group="demo-list:50">…</div>
Three cards, one trigger
These cards use the band as their trigger via
data-reveal-anchor, and
center-center waits until the band's middle hits the
viewport's middle — so they arrive as a set.
Basic
Fires with the band, no delay.
delay: 0
Pro
Same crossing, later paint.
delay: 150
Team
Same crossing, later still.
delay: 300
Where the line sits
A placement is
<element-edge>-<viewport-edge>. The
dashed guides are the viewport lines; each column waits for a
different one.
top-bottom
The default. Top edge enters at the bottom.
top-center
Top edge reaches the halfway line.
bottom-center
Bottom edge reaches the halfway line.
Scroll back up
With data-reveal-once="false", these cards hide again
when they scroll back past their line and replay on the way down.
Again
Reverses when it leaves.
data-reveal-once="false"
And again
The delay applies both ways.
delay: 100
And again
Still one observer for all four.
reveal-delay-200
And again
Grouped by offset, once and placement.
reveal-delay-250
Duration and easing, per element
Timing classes set custom properties —
--reveal-duration, --reveal-delay,
--reveal-easing. Any CSS easing works via the
property.
Slow
Nearly two seconds of travel.
reveal-duration-1800
Brisk
In and done.
reveal-duration-300
Overshoot
Sails past and comes back.
--reveal-easing: cubic-bezier(…)
Linear
No easing at all, for contrast.
reveal-ease-linear