Sticker Peel
Drag a sticker's corner and it peels back along a real moving fold, then rips clean off the sheet with your release velocity.
About This Effect
A peel-off sticker you can actually peel. Grab any corner and drag: the face folds back along a live crease, the pale underside curls over showing a mirrored ghost of the design, a gloss highlight rides the fold and a cast shadow grows as the flap lifts off the sheet.
Read the full effect overview
Peel past the threshold and let go, and the sticker rips free, tumbling away with your drag velocity and leaving a faint adhesive ghost behind before it respawns with a pop. Release early and it snaps back with a springy elastic overshoot.
It attaches to any element with one data attribute, works on any design (HTML, SVG, images), and runs on GSAP core alone: no plugins, no canvas, no WebGL.
What's Included
- Exact fold geometry: the crease is a real line perpendicular to your drag, computed every pointer move, not a canned flip animation
- Die-cut underside: the backing follows the design's actual silhouette, so a circle peels as a circle and a starburst as a starburst
- One drag drives four channels at once: fold position, gloss highlight, cast shadow, and a subtle lift-and-tilt of the whole sticker
- Rip-off signature moment with velocity-matched tumble, adhesive residue ghost, and a soft respawn pop, all tunable per sticker
- Three rip outcomes via data-peel-mode: respawn with a pop, vanish for keeps, or re-stick, a short toss that lands the sticker flat where you dropped it, squash-and-settle included, peelable again from its new home
- Elastic snap-back with a single overshoot when released under the threshold, so every interaction ends with spring
- Works identically with touch: pointer events with capture, native-drag guards, and pointercancel handled as a safe release
- Attach to any element with data-sticker-peel; mode, threshold, respawn delay and backing colour set per sticker via data attributes
- Keyboard accessible: every sticker is focusable and Enter or Space plays an automatic peel-and-return preview
Perfect For
- Product and merch pages where sticker packs, labels or badges are the thing being sold
- Playful hero sections and 404 pages that reward a visitor for poking at the design
- Promo reveals where ripping a sticker off uncovers a code, price or message underneath
- Brand and portfolio sites that want one tactile, clip-worthy interaction above the fold
- Interactive stickers in email-capture or campaign microsites where delight earns the signup
How It Works
On every pointer move the script builds the fold as a line perpendicular to the drag vector, halfway between the grabbed corner and the pointer. The sticker's face is clipped with a clip-path polygon to the un-peeled side of that line, while a second layer holds a copy of the design transformed by a reflection matrix across the fold and clipped to the peeled side, so the curl is the mathematically exact mirror of what has been lifted.
The underside's backing colour is produced with a drop-shadow silhouette trick, which is why it follows the die-cut shape of any design with no configuration. A gloss layer built the same way, flattened to white and masked to a band along the crease, puts a shine on the curl that also follows the die-cut, and the flap's cast shadow scales with peel progress.
Release is where GSAP takes over: under the threshold, a proxy value tweens back to the resting curl with elastic.out so the fold overshoots once and settles; past it, the frozen half-peeled sticker tumbles away on a velocity-scaled tween, a residue ghost fades in, and gsap.delayedCall respawns the sticker with a back.out pop.
What the rip leads to is the per-sticker data-peel-mode, read fresh at every release. Respawn (the default) runs that pop after the delay; vanish leaves only the adhesive ghost; restick maps the release point back through the grab-time frame, clamps the landing fully inside the data-peel-bounds ancestor, flies the sticker over flat on a short spin, and re-adheres it with a squash-and-settle so it can be peeled straight off its new home, leaving a ghost at every position it abandons.