# 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.

Canonical: https://gsapvault.com/effects/sticker-peel
Live demo: https://gsapvault.com/demos/sticker-peel/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | Core GSAP only |
| Techniques | draggable, clip-path, momentum, pointer-effects, micro-interaction |
| Uses Lenis | No |

## Overview

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.

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.

## Features

- 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

## 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

## Vibe-Code Ready Setup

This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## 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.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

**1. Add to your HTML `<head>`:**

```html
<link rel="stylesheet" href="path/to/style.css">
```

**2. Add before closing `</body>` tag:**

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="path/to/script.js"></script>
```

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

```html
<div class="my-sticker" data-sticker-peel aria-label="Peel the logo sticker">
  <img src="logo-sticker.png" alt="">
</div>
```

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.

### 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

### Dependencies

**Required:**

- GSAP 3.12+ (core only, no plugins)

**Optional:**

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

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Sticker Peel](https://gsapvault.com/effects/sticker-peel)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Hover Underline](https://gsapvault.com/effects/hover-underline.md): Three material link underlines—an exit-through line, marker sweep, and hand-drawn wave—with coordinated type and active-index responses.

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt