webdevpuneet.com

Related Snippets

211 in Scroll Effects category
1–6 of 60

ScrollOut Scroll Progress Bar

ScrollOut Timeline Cascade

ScrollReveal Staggered Feature Grid

ScrollReveal Fade Timeline

Three.js Scroll Shader Fluid Gradient Wave

Scroll Canvas Starfield Warp Speed

Scroll Hero Exit — Free GSAP Scatter Effect Snippet

Scroll Hero Exit · Scroll · Plain HTML, CSS & JS · Live preview

CategoryScroll Effects
TagsGSAPScroll AnimationLanding PageJS Libraries

Copy & paste

Source Code

Requires
JS · gsap.min.jsJS · ScrollTrigger.min.js
<section class="she-hero" id="sheHero">
  <div class="she-orb she-orb-a" id="sheOrbA"></div>
  <div class="she-orb she-orb-b" id="sheOrbB"></div>
  <div class="she-badge" id="sheBadge">✦ Now in public beta</div>
  <h1 class="she-title" id="sheTitle">Leave a lasting<br>first impression</h1>
  <p class="she-sub" id="sheSub">This hero doesn't just scroll away — every element exits on its own path.</p>
  <div class="she-ctas" id="sheCtas">
    <button class="she-btn she-primary">Get started</button>
    <button class="she-btn she-ghost">Watch demo</button>
  </div>
  <span class="she-cue" id="sheCue">scroll ↓</span>
</section>
<section class="she-next">
  <h2>The next section</h2>
  <p>Scroll back up and watch the hero reassemble piece by piece.</p>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Choreographed exit
Every element leaves on its own vector.
Unpinned design
No added scroll length — motion rides the exit.
Cascade timing
Tight staggered starts read as sequence.
Counter-rotations
Title and copy bank apart like dealt cards.
Orb parallax
Background moves furthest for depth.
Additive transforms
Exit offsets stack on scroll position.
Compositor-only
Transforms and opacity, zero layout.
Reversible
Scrolling up reassembles the hero.

About this UI Snippet

Scroll Hero Exit — A Hero That Scatters Instead of Scrolling Away

Screenshot of the Scroll Hero Exit snippet rendered live

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.

Step by step

How to Use

  1. 1
    Add the GSAP CDNsInclude gsap and ScrollTrigger from the CDN panel.
  2. 2
    Paste HTML, CSS, and JSA full hero renders with orbs, badge, title, and CTAs.
  3. 3
    Scroll down slowlyEach element departs along its own path.
  4. 4
    Note the depthBackground orbs outrun the foreground content.
  5. 5
    Scroll back upThe hero reassembles piece by piece.
  6. 6
    Retune the vectorsEach tween's x/y/rotation is one line to edit.

Real-world uses

Common Use Cases

Landing page departures
Choreograph how a hero leaves, with the badge lifting out, the headline banking left, the subtitle drifting right and the buttons sinking away on their own paths.
Product launch handoffs
Scatter the hero into a scroll image sequence showcase, using tight staggered starts so the exit reads as a deliberate sequence.
Portfolio introductions
Depart with personality, then lead into a scroll reveal grid of work, with title and copy counter-rotating like dealt cards.
Section transition handoffs
Hand off into a scroll curtain reveal, with no added scroll length because the motion rides the natural exit of the hero.
Pinned alternatives and app marketing
Compare with a held hero like scroll zoom hero, or exit a pitch before entering scroll phone screens for an app launch.
Related: Scroll-Linked Audio Waveform Scrub
See the Scroll-Linked Audio Waveform Scrub for a related scroll pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The hero does scroll off normally — the trigger is unpinned — but a scrubbed timeline layers exit transforms on top of that natural departure. Each element's screen position becomes "scrolled position plus its own displacement," so the badge, title, copy, CTAs, and orbs visibly outrun the page along different vectors instead of leaving as one flat block.

Pinning inserts extra scroll distance and gates the user inside the section, which suits reveals but feels heavy for a departure. Mapping the timeline to start: 'top top' / end: 'bottom 25%' spends zero additional scroll: the scatter completes within the exact gesture that was already removing the hero, keeping the page rhythm intact.

Scrub ties timeline progress to scroll position, so moving up simply plays the same timeline backward — every element retraces its exit vector while the hero section scrolls back into view. There's no separate "enter" animation to write and no state to reconcile; scroll position is the single source of truth.

Layered speeds. The blurred orbs travel furthest (±240–260px with a 1.4× scale-up), the headline and copy move moderately with slight counter-rotations, and the CTAs sink modestly — all compounding with the page's own scroll. Different speeds in different directions is classic parallax, applied to an exit instead of an entrance.

Build the timeline in a mount effect — useEffect, onMounted, or ngAfterViewInit — inside gsap.context scoped to the hero ref, targeting child refs or scoped selectors, and revert the context in the cleanup so triggers die on unmount and route changes. The hero's layout, gradients, and buttons translate directly to Tailwind utilities; only the seven tween lines are JavaScript.