Scroll Card Fan — Free GSAP Deck Spread Snippet

The scroll card fan takes a neat pile of cards and spreads it into a hand-of-cards arc as you scroll — the same gesture as fanning playing cards on a table, driven by the scrollbar and fully reversible. It's a compact way to introduce a set of features, plans, or categories with one satisfying motion. This snippet builds it with GSAP ScrollTrigger (from a CDN) and a single transform-origin trick.

One low pivot point creates the entire arc

Every card is absolutely stacked in the same box with transform-origin: 50% 130% — a pivot *below* the card's bottom edge. Rotating around that shared low point automatically swings each card outward and upward along a circular arc, exactly like cards pinched at one corner. Without the shifted origin you'd have to hand-calculate an x/y/rotation triple per card to fake the arc; with it, rotation alone does 90% of the work.

Spread is computed from distance-to-center

Each card's target rotation is (i − mid) × 16°, where mid is the middle index. The center card stays upright, neighbors lean ±16°, outer cards ±32° — a symmetric fan that works for any odd or even card count without editing the tween code. A small x: spread × 24 widens the fan beyond what pure rotation gives, and y: |spread| × −6 lifts outer cards slightly so their top corners align along the arc.

The deck starts as a believable pile

Before the trigger runs, gsap.set gives each card a resting offset — 1.5° of alternating rotation and 2px of vertical stagger. That messy-pile look matters: fanning from a mathematically perfect stack reads as sterile, while fanning from a slightly uneven pile reads as physical. Because these offsets are set as start values, the scrubbed tween interpolates from pile to fan and back without snapping.

All cards animate at position 0, plus one accent later

Every card's tween is placed at timeline position 0 so the whole fan opens as one gesture rather than card-by-card. Then, at 75% of the timeline, the center card lifts 34px and scales to 1.06 — a focal accent that lands only after the fan is mostly open, giving the sequence a beginning (spread) and an end (highlight) within one scroll.

Pinned, scrubbed, and compositor-only

The stage pins for +=160% with scrub: 0.4, so the fan opens exactly as far as you've scrolled and glides slightly after each wheel tick. Rotation, translation, and scale are all transforms — no layout or paint work — and will-change: transform promotes each card to its own layer up front, avoiding promotion jank mid-scroll.

z-order comes free from source order

Later cards in the DOM paint on top, so the rightmost card naturally overlaps leftward like a real right-handed fan. Reverse the DOM order (or set explicit z-indexes) to flip the overlap direction.

The fanned cards stay fully interactive

Nothing about pinning or scrubbing disables the DOM: the cards remain real elements at every scrub position, so links, hover states, and click handlers work mid-fan or fully open. ScrollTrigger's pin spacer wraps the stage without intercepting pointer events, and because the cards only carry transforms, their hit areas travel exactly with their rendered positions. A common production touch is enabling a lift-on-hover only once the fan is open — gate it by checking tl.progress() > 0.9 in a pointerenter handler, or toggle a class from an onComplete-style position callback on the timeline.

Customizing it

Change the spread angle, card count (the mid math adapts), or make each card a link. Pair the fan with a scroll sticky stack for the section after, a scroll 3d cards alternative entrance, or stacked cards for a hover-driven cousin.