.pin - sticky sections

.pin holds an element fixed to the viewport across a scroll range using ScrollTrigger pinning (with spacing kept intact). The next section starts exactly where the pinned one released.

Demo - back-to-back pins

Two pinned panels in a row: watch panel 1 lock to the viewport while you scroll through its range, release, and panel 2 engage at exactly that scroll position - no gap, no jump.

Pinned panel 1

locked - keep scrolling until it releases

Pinned panel 2

engaged exactly where panel 1 released

content after the pins - if you see doubled space above, pin cleanup leaked

Demo - early release with .progress-end-25

Tunables move the engage/release points. This panel releases 25% before its range would normally end - it lets go noticeably earlier than the two above did. Scroll back and forth across both demos to feel the difference.

.pin .progress-end-25

releases 25% early

normal flow resumes here

Tunables

progress-start-NPin engages N% before the top reaches viewport top

progress-end-NReleases N% earlier than full range

html

<section class="pin progress-start-10" style="height:60vh">…</section>

Pins are created before every other trigger measures layout, and their teardown uses kill(true) so spacers never leak between engine restarts.