.scroll - play on scroll enter

Adding .scroll to any spawn hands control to a ScrollTrigger: the entrance plays when the element enters the viewport, and reverses back to its hidden state when it leaves - so scrolling back replays it every time.

<div class="scroll spawn-up time-1">enters → slides up</div>

<!-- scroll + appear on the same non-text element is redundant:
     .scroll owns the element completely -->
<div class="appear scroll spawn-fade">appear is ignored here</div>

Demo - scroll down, then back up

Every box below carries .scroll with a different spawn. Each one slides in as it crosses the bottom edge and rewinds when you scroll it back out - try both directions.

Demo - triggers fire independently

Side-by-side elements get their own trigger each: they enter at different scroll offsets even though they sit on the same row.

Demo - .scroll-fade-bg - background scrubs

.scroll-fade-bg lerps background-position from 0% 0% → 100% 100% while the element traverses the viewport (scrub: true). Give it a background larger than the box to see the drift.

<div class="scroll-fade-bg" style="background: radial-gradient(circle, cyan, transparent) 0% 0% / 200% 200%">…</div>

Demo - .scroll-horizontal - pinned pan

.scroll-horizontal pins its section and pans the inner .scroll-track left as you scroll. The track must be wider than the viewport - pin: true + scrub: 1 does the rest (Listeners.js:851).

<section class="scroll-horizontal" style="height:60vh; overflow:hidden">
  <div class="scroll-track" style="display:flex; width:200%">
    <div>panel 1</div><div>panel 2</div><div>panel 3</div>
  </div>
</section>

Text elements are the exception: their scroll triggers are wired at init, so a re-inserted .appear text element animates via the appear path instead of double-firing a trigger.