# Cookie Consent Banner

> A GDPR-grade cookie consent banner: a compact card that Flip-morphs into a preferences panel with per-category switches, fires a consent event with the chosen categories, remembers the choice and folds away.

Canonical: https://gsapvault.com/ui-elements/consent-preferences-card
Live demo: https://gsapvault.com/demos/consent-preferences-card/index.html

| Property | Value |
|----------|-------|
| Type | ui-element |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | Flip |
| Techniques | flip-layout, state-transition, micro-interaction, stagger, keyboard-navigation, focus-management |
| Uses Lenis | No |

## Overview

A cookie consent banner built as a consent manager rather than a notice. The compact card rises from the bottom edge on a settled power4 ease with its icon, title, copy and buttons staggering in. Pressing Manage preferences morphs that card into a taller preferences panel with GSAP Flip, tweening its width, height and position so the type never distorts, while the category rows stagger in from below. Each category is a real switch with a springy knob and a cross-fading track; Necessary is locked on with a padlock and a disabled control.

Accept all, Reject non-essential and Save preferences all resolve to one object of category booleans, store it in localStorage under your key with a version, and dispatch a consent:change event on the root so you can gate analytics, marketing and personalisation scripts on it. Accept and Save turn the pressed button into a drawn check before the card folds toward its bottom edge. On later visits a valid stored choice keeps the banner hidden; bump the version to re-ask everyone.

Three positions on one attribute: a bottom-left card, a full-width bottom bar and a centred modal with a backdrop, focus trap and scroll lock. Escape only ever steps back from the preferences panel, because dismissing a consent banner must never count as consent. On phones every position becomes a bottom sheet with stacked 48px buttons and an internally scrolling list. Three shipped looks, light, dark and slate, defined entirely in CSS custom properties: dark is the same design re-valued, not a second skin.

## Features

- Compact card rises on power4.out with the icon, title, copy and buttons staggering in
- GSAP Flip morph from the card to the preferences panel and back, tweening width and height so text is never squashed
- Per-category role=switch controls with a back.out knob spring and a cross-fading track; a locked Necessary category with a padlock
- consent:change event with one boolean per category plus the source (accept-all, reject or save)
- Choice stored in localStorage under data-storage-key with a data-version, so a version bump re-asks everyone
- Accept and Save morph the pressed button into a drawn check, then the card folds toward its bottom edge on expo.in
- Three positions from one attribute: bottom-left card, full-width bottom bar, centred modal
- The centred position is a real dialog: backdrop, focus trap, scroll lock, focus return; the edge positions never steal focus
- Escape closes the preferences panel only, never the banner, so a dismissal is never silent consent
- Public API: show, hide, openPreferences, closePreferences, acceptAll, rejectAll, save, get, reset
- Phone bottom sheet under 640px with stacked 48px buttons, 44px switch targets and an internally scrolling list
- Three shipped looks (light, dark, slate) as CSS custom property blocks; reduced motion mounts every state instantly

## Use Cases

- GDPR and ePrivacy cookie consent on marketing sites and web apps
- Gating analytics, advertising and personalisation scripts on a recorded choice
- A cookie settings link in the footer that reopens the preferences panel
- Re-asking every visitor after a policy change by bumping one version attribute
- Product sites that want the consent flow to match the rest of the interface instead of a third-party widget

## Vibe-Code Ready Setup

This UI element 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

### The rise and the morph

The card starts at yPercent 110 from a gsap.set, never a CSS transform, and comes up on power4.out, which lands with no overshoot. Pressing Manage fades the compact copy out, records the card with Flip.getState(), swaps the hidden attributes, then Flip.from() animates the difference in position, width and height. scale is deliberately off: scaling a box with text squashes the type for the whole tween, while tweening width and height keeps it upright. The rows stagger in while the card is still growing, and the inline size is cleared on completion so the card hands back to its CSS.

### Springy switches, settled card

Each knob's travel is measured from its track at the moment it toggles, so a variant can resize the switch in CSS alone. The knob moves on back.out(2.2) and the track and knob colours cross-fade underneath on a plain ease, read from the switch's custom properties at call time. The springiness lives only there: the card itself never bounces.

### Deciding, storing, folding

Accept, Reject and Save resolve to one object of category booleans, write it to localStorage with the version, and dispatch consent:change before anything animates, so a listener runs even if the page navigates mid-fold. Accept and Save then draw a check into the pressed button; all three pin the card's height and tween it, with its padding, to zero on expo.in. The hidden attribute is set in onComplete so no invisible layer is left covering the page, and in the centred position the scroll lock releases and focus returns to where it was.

## Integration Preview

How this UI element 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 the closing `</body>` tag:**

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

**3. Copy the component markup** (the block between `<!-- Component starts here -->` and `<!-- Component ends here -->` in `index.html`) into your page, anywhere in `<body>`. It is one root element:

```html
<div data-cookie-consent data-position="bottom-left" data-storage-key="cookie-consent" data-version="1" role="region" aria-label="Cookie consent">
  ...
</div>
```

**4. Gate your scripts on the event:**

```js
document.querySelector('[data-cookie-consent]').addEventListener('consent:change', function (event) {
  if (event.detail.analytics) loadAnalytics();
  if (event.detail.marketing) loadAdPixels();
});

// On later visits the banner does not show; read the stored choice instead.
var stored = window.cookieConsent.get();
if (stored && stored.categories.analytics) loadAnalytics();
```

## 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 UI element. 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 Cookie Consent Banner](https://gsapvault.com/ui-elements/consent-preferences-card)
- [The Vault (£99 one-time, best value): every current and future effect, template and UI element](https://gsapvault.com/effects)

---

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