Scroll Animations

Scroll triggered animations - fade • zoom • slide

It seems that you have reduce motion enabled! Animations will not work as designed.

Onload

Waits ≈ declared delay; here: delay-1s.
<div class="card anim fade-in onload delay-1s" style="--anim-dur: 8000ms">


fade-in onload (≈1s total) style="--anim-dur: 8000ms
class="anim fade-in onload delay-1s" style="--anim-dur: 8000ms"

Scoll Animations

Scroll animation system provides class-based triggers for smooth, accessible effects.

Animations are activated when elements cross into view, using percentage-based triggers (atNN) or automatic on-load activation (onload).

  • Fade – fade-in / fade-out with optional trigger point: fade-in-at60.
  • Zoom – zoom-in / zoom-out with adjustable scale: zoom-in2-at70.
  • Slide – slide-in|out-(up|down|left|right) with optional distance: slide-in-right-d64-at50.
  • Trigger Point (-atNN) – percentage of viewport height where the effect starts (e.g., at80 = 80% down the screen).
  • Distance (-dNN) – pixel offset for slide animations (e.g., d200 = 200px).
  • Timing – control duration with --anim-dur or utilities: anim-slow, anim-fast, anim-snail.
  • Delays – add delay-1s, delay-2s, etc. to sequence animations.
  • Stagger – apply a staggered effect to children: stagger-fade-in-at80, stagger-slide-in-right.
  • One-shot – add one-shot to run once and not repeat on scroll back.

Combine effects for layered motion (e.g., fade-in-at70 slide-in-up-d128-at70).

Reduced motion

  • Motion is automatically disabled when the user enables Reduce motion at the OS/browser level via prefers-reduced-motion: reduce, and for @media print.
  • When motion is disabled, animated elements snap to their end state (no scrolling/onload transitions) and content remains visible.
  • Optional helper banner: add .reduce_motion to any element to show it only for reduced motion / print.
Optional banner pattern
<section class="reduce_motion">…</section>
.reduce_motion { display:none; } @media (prefers-reduced-motion: reduce), print { .reduce_motion { display:block; } }

Guide & Reference

Cheat sheet

Triggers
onload — run after page load (respects delay; total ≈ declared delay)
-atNN — run when element top reaches NN% of viewport (e.g. fade-in-at60)
.atNN — set default trigger on a container (children inherit if they lack -at)
Effects
fade-in, fade-out
zoom-in10, zoom-out20 (number = % amount)
slide-(in|out)-(left|right|up|down)[-d{px}]
Options
one-shot — fire once, never revert
stagger-effect-atNN [+ stagger-reverse]
delay-200 | delay-0_5s | delay-2s (underscore for decimals)
Timing vars (CSS)
--anim-dur — duration (e.g. 600ms)
--anim-delay — set by delay-* classes
--anim-stagger-step — stagger gap (default 120ms)

Delay behavior

  • Onload: we wait roughly (declared delay − duration), then start the transition with no extra CSS delay. Net time to fully visible ≈ your declared delay.
  • Scroll triggers: we toggle active immediately on trigger; CSS delay runs inside the transition. Perceived wait ≈ your declared delay.
  • Accepted formats: delay-200 (ms), delay-0_5s, delay-1_5s, delay-2s.

Effect combos & conflict rules

  • Slide-ins already fade-in. Prefer slide-in-* alone, or pair with fade-out for exit. Avoid fade-in + slide-in together unless you want extra opacity easing.
  • fade-out dominates other effects when active (we turn off fade-in/zoom/slide-in so the element can disappear cleanly).

Tips

  • Per-element speed: set style="--anim-dur: 1200ms" or make utility classes (e.g., .anim-slow, .anim-fast).
  • Default trigger via container: wrap items in .at55 so any child without -atNN uses 55%.
  • Accessibility: focus/keyboard users are kept visible (see .anim:focus-within rule).

Fade In / Out @ thresholds

Triggers when the element’s top reaches the given % of viewport height.

fade-in-at75
class="anim fade-in-at75"
fade-in-at50, fade-out-at20
class="anim fade-in-at50 fade-out-at20"
one-shot + fade-in-at60
class="anim one-shot fade-in-at60"
fade-in-at25 + delay-200ms
class="anim fade-in-at25 delay-200"
fade-in-at35 + delay-0_3s
class="anim fade-in-at35 delay-0_3s"

Zoom

zoom-in10 = start at ~0.90 scale → 1.00. zoom-out20 = start at ~1.20 → 1.00.

zoom-in10-at50
class="anim zoom-in10-at50"
zoom-in20-at50
class="anim zoom-in20-at50"
zoom-out10-at50
class="anim zoom-out10-at50"
zoom-out20-at50 + fade-out-at20
class="anim zoom-out20-at50 fade-out-at20"

Slide In / Out (directions + distance)

Slide-ins already include opacity. Use -d{px} to override distance.

slide-in-right-at60
class="anim slide-in-right-at60"
slide-in-left-at60
class="anim slide-in-left-at60"
slide-in-up-at60
class="anim slide-in-up-at60"
slide-in-down-at60
class="anim slide-in-down-at60"
slide-out-left-at40
class="anim slide-out-left-at40"
slide-in-right-d64-at60 (64px distance)
class="anim slide-in-right-d64-at60"

Animation Speed Utilities

These examples use .anim-slow, .anim-fast, .anim-snail, and .anim-instant.

at50 .anim-instant

0ms duration

at50 .anim-fast

300ms duration

at50 .anim-slow

1400ms duration

at50 .anim-snail

4000ms duration

Default Trigger via .atNN

Container has .at55, children inherit 55% when their effect has no explicit -atNN.

fade-in (inherits at55)
class="anim fade-in"
slide-in-right (inherits at55)
class="anim slide-in-right"
zoom-in10 (inherits at55)
class="anim zoom-in10"

Stagger

Applies effect to children, offset by --anim-stagger-step (default 120ms). Add stagger-reverse to reverse order.

stagger-fade-in-at80

  • One
  • Two
  • Three
  • Four
  • Five
class="stagger-fade-in-at80"

stagger-fade-in-at80 + stagger-reverse

  • One
  • Two
  • Three
  • Four
  • Five
class="stagger-fade-in-at80 stagger-reverse"

Combined Examples

Common patterns that play nicely with the conflict rules.

slide-in-up-at70, fade-out-at20
class="anim slide-in-up-at70 fade-out-at20"
zoom-in10-at60 + slide-in-right-at60 + delay-2s
class="anim zoom-in10-at60 slide-in-right-at60 delay-2s"
slide-in-left-at50 + one-shot
class="anim slide-in-left-at50 one-shot"
Dark Mode - needs work

It seems that you have reduce motion enabled!