039
AI ready

Sticker Peel

£5

Drag a sticker's corner and it peels back along a real moving fold, then rips clean off the sheet with your release velocity.

advanced
5 more details
draggableclip-pathmomentumpointer-effectsmicro-interaction
Sticker Peel - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Sticker Peel demo in new tab

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

9 items
  • 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

5 use cases
  • 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

4 sections

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 the fold springs back to its resting curl with one overshoot; past it, the frozen half-peeled sticker tumbles away on a speed-scaled throw, a residue ghost fades in, and the sticker respawns with a pop after a short delay.

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.

Difficulty Advanced
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, 9 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Sticker Peel opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add data-sticker-peel to any element in your <body>:

Code snippet omitted: it ships with the download.

That is the whole integration. The script finds every [data-sticker-peel], wraps its contents in the peel layers, adds the resting corner curl, and wires up pointer, touch and keyboard handling.

Using It With Your Own Design

What the effect needs from your markup: one element carrying data-sticker-peel, containing the sticker design as ordinary HTML, inline SVG or an image. If any sticker uses data-peel-mode="restick", also mark the container it should land inside with data-peel-bounds on an ancestor (the demo puts it on the .sheet); without it, landings are clamped to the viewport, which is rarely what a board layout wants. At init the script moves that content into a generated .peel-face wrapper and builds the flap, residue and measurement probes as siblings, so do not rely on your design being a direct child of the peel element after load (style it through its own classes instead). Give the element a real size (a width plus intrinsic or aspect-ratio height): the fold geometry is measured from its rendered box. Rotating or scaling the sticker is fine as long as it happens on the element or an ancestor via CSS, the way the demo rotates every .slot; the script measures the on-screen frame at grab time and maps pointers through it. What it cannot survive is you re-transforming the element every frame while a peel is in progress.

What is only the demo's styling: everything under the "DEMO: THE STICKER SHEET" banner in style.css: the .sheet board, .slot placement, and all the sticker designs (.badge, .pill, .burst, .smiley, .arch, .tag, .chip). Delete all of it. Stacking is handled for you: the script keeps a shared counter and stamps the current sticker's z-index on both the sticker and its positioned ancestor (found via offsetParent, skipping the data-peel-bounds container and the page body), because a rotated wrapper is its own stacking context and the sticker's own z-index cannot escape it. A restuck sticker keeps its landing level at idle, so whatever was pressed down last sits on top. The demo's .slot:has([data-peel-state]) rules are only a CSS-side echo of the same idea; copy them or not. The "After the rip" mode switcher is demo chrome too: .showcase-modes in the CSS plus a tiny inline script in index.html that just stamps data-peel-mode onto every sticker. The effect script never queries the switcher; copy that wiring pattern or set the attribute however you like.

CSS the effect depends on: the "STICKER PEEL - EFFECT CONTRACT" section of style.css must survive a reskin. In particular: position: relative and touch-action: none on [data-sticker-peel] (without the latter, phone peels scroll the page and die in pointercancel); transform-origin: 0 0 on .peel-flap (the reflection matrix is computed for that origin); the .peel-under drop-shadow silhouette block including its 2000px offsets (that is what gives the underside the design's die-cut shape); the --peel-backing: #ffffff override on .peel-gloss (the gloss is a white silhouette clone that the script masks to a band along the fold, so the shine never paints outside the die-cut); and overflow: hidden on .peel-residue (it clips the silhouette's shifted source copy). -webkit-user-drag: none on images and links prevents the browser's native drag from cancelling a peel mid-gesture. Keep the data-peel-restuck focus-ring rules and the data-peel-state cursor/shadow rules too: they are what makes a moved sticker's focus ring and rip-flight shadow land in the right place. The backing and residue colours are the CSS variables --peel-backing and --peel-residue, restyle them freely.

Options

All options are per-sticker data attributes on the [data-sticker-peel] element.

Attribute Values Default Description
data-sticker-peel marker required Makes the element a peelable sticker
data-peel-mode respawn, vanish, restick respawn What a rip does. respawn tumbles away and pops back; vanish tumbles away and stays gone; restick tosses the sticker flat to the release point and re-adheres it there. Read fresh at every release, so you can change it live by setting the attribute
data-peel-threshold 0 to 1 0.6 Peel progress needed at release for the sticker to rip off. Lower rips easier
data-peel-respawn milliseconds, or false 1200 Respawn-mode delay before a ripped sticker pops back. false disables ripping entirely in every mode, so the sticker always snaps back. That is different from vanish, which still rips; with false the rip never happens at all
data-peel-backing any CSS color #f2efe9 Colour of the underside shown on the curl
data-peel-bounds marker, on an ancestor the viewport Restick landing area: a re-stuck sticker is clamped fully inside this element's box. Put it on your sheet or board container

Accessibility

  • Reduced motion: with prefers-reduced-motion: reduce the script builds no peel layers at all; the stickers render exactly as authored, a fully composed static sheet with nothing hidden or blank (the demo also hides its mode switcher, which would otherwise be a control wired to nothing)
  • Keyboard: each sticker gets tabindex="0" and role="button" (your own values are respected if already set); Enter or Space plays an automatic peel-and-return preview. The preview never rips, in any mode, so keyboard activation can never destroy or relocate a sticker
  • Focus visible: the :focus-visible ring pairs with the same shadow lift the hover state uses; on a restuck sticker the ring follows the sticker to its new position via the data-peel-restuck rules in the contract CSS
  • Vanished stickers are set aria-hidden="true" and tabindex="-1", so an invisible button is never offered to keyboard or screen-reader users (both restored on teardown)
  • Labels: set aria-label on each sticker; without one the script falls back to the sticker's text content
  • Touch: taps that never drag play the preview peel, so coarse-pointer visitors always get a response; pointercancel releases safely without ripping

Performance Notes

  • Per pointer move the script writes two clip-path polygons, one matrix, one filter and one gloss mask gradient; the geometry maths reuses shared scratch buffers so moves allocate almost nothing
  • The flap's cast shadow is a drop-shadow filter on a small element; the silhouette drop-shadows are zero-blur and effectively free
  • No canvas, no WebGL, no ticker loop: the effect only does work while a pointer is actually peeling or a release tween is running

Dependencies

Required:

  • GSAP 3.12+ (core only, no plugins)

Optional:

  • None. The effect has no scroll mechanic and does not use Lenis.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Everything in the catalogue, plus everything we release next.

Or browse effects, templates or UI elements.