Scroll-Triggered Reveal Badge

A badge that fades/slides in when you scroll it into view, then plays back out if you scroll back past it — a genuinely new CSS primitive, animation-trigger + timeline-trigger, not the animation-timeline: view()/scroll() continuous-progress link already in this catalog's view-timeline-reveal and scroll-progress-rail entries. The difference matters: animation-timeline scrubs an animation's progress directly to scroll/view position (good for progress bars and parallax), while animation-trigger ties a normal, already-defined keyframe animation to a named timeline-trigger that just calls play-forwards once a scroll/view condition is crossed and play-backwards once it's exited — a declarative on/off toggle, the CSS-native replacement for an IntersectionObserver callback that adds/removes a class. Checked for overlap before building: grepped this whole catalog for 'animation-trigger' and 'timeline-trigger' — zero existing matches (only the unrelated animation-timeline/scroll-timeline property family appears); genuinely new ground. Sourced this run from Chrome's own developer blog post 'Scroll triggered animations' (dated 2025-12-12, found via WebSearch aggregation — Firecrawl's firecrawl_scrape returned the same 'Insufficient credits' error as the last two runs, 3rd day running now, and a direct WebFetch to developer.chrome.com hit this sandbox's standing ENOTFOUND egress block, so this rests on WebSearch's own cross-checked snippets, not a full primary-source fetch, same tooling gap as recent prior days): it documents animation-trigger (e.g. `animation-trigger: --t play-forwards play-backwards;` on an element that already has a normal `animation:` declared) plus timeline-trigger-name/timeline-trigger-source (`timeline-trigger-source: view();`) to define the named trigger's source, and says the feature lands 'in Chrome 145.' Cross-checked, not taken on one source's word: caniuse's own mdn-css_properties_animation-trigger page (also via WebSearch, same tooling gap) gives a different version than the blog — Chrome/Edge listed unsupported through 145 and supported only from Chrome/Edge 146, Opera from 131; a real, open discrepancy with the blog's own '145' claim, stated plainly rather than picked arbitrarily (Chrome 145 itself is independently confirmed to have reached stable on 2026-02-10 per Google's own Chrome Releases post and a corroborating HelenTech report, so the discrepancy is specifically about animation-trigger's own support window, not about whether 145 shipped at all). Firefox is listed as unsupported from version 2 through 156 on that same caniuse page — not just behind a flag like the older animation-timeline feature, genuinely unimplemented; Safari and Safari iOS are unsupported through 26/26.5, with Safari Technology Preview marked 'support unknown.' modern-css.com's own reference page (via WebSearch) calls animation-trigger explicitly experimental and not Baseline, advising a fallback before production use. Shipping status stated plainly: Chromium-only today (Chrome/Edge 146+, Opera 131+), and narrower than this catalog's existing animation-timeline entries, which at least Safari has shipped — Firefox and Safari support neither the forward/backward trigger action nor, for Safari, even behind a flag. Zero JS, zero WebGL, zero scroll-jacking: like this catalog's other scroll-linked entries, it never calls preventDefault or touches scroll position, only reads it — native scrolling, touch, trackpad, and keyboard all behave exactly as normal. (Vanilla example: live iframe preview + HTML/CSS tabs — scroll inside the box, then scroll back up.)

<div class="sdt-wrap">
  <div class="sdt-scroller" tabindex="0" aria-label="Scrollable demo content">
    <div class="sdt-spacer">scroll ↓</div>
    <div class="sdt-zone">
      <span class="sdt-badge">Unlocked ✓</span>
    </div>
    <div class="sdt-spacer">scroll back up ↑ to re-hide</div>
  </div>
</div>