Scroll Hero Exit — Free GSAP Scatter Effect Snippet

Most heroes just slide off the top of the viewport. The scroll hero exit choreographs the departure: as you scroll away, the badge lifts out, the headline banks left, the subtitle drifts right, the buttons sink, and the background orbs blow outward — each element leaving along its own vector, faster than the page itself. Scroll back and the hero reassembles in reverse. This snippet builds it with GSAP ScrollTrigger (from a CDN) as an *unpinned*, scrubbed exit.

Unpinned: the animation rides the natural scroll

Unlike pinned effects, the hero stays in normal document flow. The trigger maps the hero's own journey off-screen — start: 'top top' to end: 'bottom 25%' — onto the timeline, so the scatter plays *during* the scroll the user was already doing. Nothing hijacks the page or adds scroll length; the exit simply layers extra motion on top of the departure. That's the key difference from a pinned reveal, and it's why the effect feels weightless rather than gated.

Every element gets its own exit vector

The choreography assigns direction by role: the badge exits up (it entered the conversation first, it leaves first), the headline and subtitle split horizontally with small counter-rotations (±3–4°) so they bank like cards being dealt apart, and the CTA row sinks down with a scale-down — receding rather than flying. Splitting the exits is what makes the hero feel *composed of parts* instead of being one flat screenshot sliding away.

Staggered starts create a cascade without hiding anything

Each tween starts slightly later than the last (0, 0.05, 0.1, 0.15) — a tight cascade that reads as sequential departure while ensuring everything is fully gone before the hero's bottom passes 25% of the viewport. Because the whole timeline is scrubbed, a slow scroll shows the full choreography and a fast flick compresses it, both correctly.

The orbs amplify the parallax

The two blurred background orbs travel the *furthest* (±240–260px, scaling up 1.4×) while also fading — moving faster than the foreground content in the opposite screen directions. Since the page itself is scrolling too, the compound motion creates strong depth: background elements appear to blow past the camera as the content departs.

Additive motion, not replacement motion

All exit transforms are relative offsets on top of the element's scrolled position, so at any scrub point the element's screen position is "where scrolling put it, plus its exit displacement." That's why the reassembly on scroll-up looks physical — each piece flies back along the same path onto a hero that's simultaneously scrolling into view.

Transform-only and interruption-safe

Every property is a transform or opacity, so the scatter runs on the compositor even with seven elements moving. With scrub: 0.4, changing direction mid-exit smoothly re-targets — there's no state to desync because scroll position *is* the state.

Customizing it

Retune vectors per element, tighten the cascade, or end earlier (bottom 50%) for a snappier vanish. Pair it with a scroll curtain reveal for the next section's entrance, a scroll letter stagger headline for the hero's own entrance, or compare the pinned scroll zoom hero approach.