# Product Launch Template

> A complete one-page product launch site built from GSAP Vault effects: bouncy word-pop hero with rising fizz, rotating badge, ink ticker, elastic sticker cards, and a pinned flavour switcher that retints the whole section as you scroll.

Canonical: https://gsapvault.com/templates/product-launch-template
Live demo: https://gsapvault.com/demos/product-launch-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £5 |
| Difficulty | beginner |
| Plugins | ScrollTrigger |
| Techniques | scroll-reveal, stagger, marquee, infinite-loop, pin, hover-effect, text-animation, reveal, matchMedia |
| Uses Lenis | Yes |

## Overview

A production-ready one-page launch site for drinks, snacks, cosmetics, and any product that ships in a box, with a sunny CPG art direction: saturated golden ground, thick ink linework, cream CSS-drawn product cans, and sticker-sheet cards. The hero headline pops in word by word with an elastic bounce while fizz bubbles rise behind the can and a circular badge slowly rotates, an ink ticker strip loops the launch messaging, benefit cards snap in and squish on hover, and the signature flavour switcher pins the can while the entire section retints to each flavour's colour as its panel scrolls past. Swap the placeholder brand, flavours, and prices for your own product and deploy anywhere as static files.

## Features

- Complete deployable one-page site: nav, product hero, ticker, benefits, flavour switcher, stockists, buy, and footer sections
- Signature pinned flavour switcher: the product stays sticky while the whole section background retints and the can swaps per flavour
- Bouncy word-pop hero reveal with a rotated sticker chip on the key word
- Ambient rising fizz bubbles behind the hero product, paused automatically when off screen
- Rotating circular SVG badge with curved text
- Seamless ink ticker strip with adjustable pixel-per-second speed
- Elastic sticker-card reveals with a squish-and-wobble hover
- Product cans drawn entirely in CSS, no image assets to license or swap
- Lenis smooth scrolling wired in and fully optional
- Accessible: reduced motion gets a complete static page, the flavour switcher falls back to stacked cards without JavaScript, focus mirrors hover throughout

## Use Cases

- Drink, snack, and food brand launch sites
- Cosmetics, candles, and lifestyle product one-pagers
- Direct-to-consumer product drops that need personality
- Crowdfunding and pre-order landing pages
- Learning how GSAP Vault effects compose into a full page

## How It Works

One script initialises each section inside a single gsap.context with gsap.matchMedia. The hero words animate from scale and rotation with back.out easing, the fizz bubbles are a pooled set of spans on looping timelines with a sine x-wobble, and the ticker tweens a duplicated track by xPercent with a duration computed from its measured width. The signature flavour switcher keeps the can column in place with CSS position sticky while ScrollTriggers on each copy panel tween the section's backgroundColor and crossfade the matching can; on small screens and without JavaScript the same markup renders as stacked flavour cards. A prefers-reduced-motion branch leaves the fully-visible static markup untouched.

## 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. Use the folder as your site root.** `index.html` is the complete page. Open it locally or drop the folder on any static host (Netlify, Vercel, GitHub Pages, a plain server).

**2. Replace the placeholder content** in `index.html`:

- Brand name: search for `JUNO` and `Juno` (nav, cans, footer)
- Hero headline, sub, and meta chips
- The four "Why" cards
- The three flavour panels and their matching cans
- Stockist wordmarks, buy section copy, and footer links

**3. Recolour the brand** in `assets/style.css`. All colours live in the `:root` token block:

```css
:root {
    --sun: #F2AE1C;      /* page ground */
    --sun-card: #FFC94B; /* first flavour card / tag chips */
    --cherry: #E4573D;   /* second flavour */
    --cuke: #5FAD73;     /* third flavour */
    --ink: #2A1608;      /* linework and text */
    --cream: #FFF4DC;    /* cans and cards */
}
```

Flavour panels also carry their colour in the markup for the scroll retint. Keep `data-flavour-color` in sync with the CSS when you change a flavour:

```html
<article class="flavour-panel panel--cherry" data-flavour-color="#E4573D" data-flavour-word="Cherry">
```

`data-flavour-word` is the giant word shown behind the can while that flavour is active.

**4. Keep the script tags at the bottom of `index.html`** (GSAP core, ScrollTrigger, Lenis, `assets/script.js`). Lenis is optional; delete its script tag and the Lenis block at the top of `assets/script.js` for native scrolling. For production, swap `assets/script.js` for `assets/script.min.js`.

### Options

| Attribute | Element | Values | Default | Description |
|-----------|---------|--------|---------|-------------|
| `data-pop` | any | presence | off | Rise-and-fade reveal when scrolled into view |
| `data-pop-delay` | `[data-pop]` | seconds | `0` | Stagger delay for grouped reveals |
| `data-sticker` | any | presence | off | Elastic pop-in reveal plus squish hover |
| `data-ticker-speed` | `.ticker` | px per second | `80` | Ticker scroll speed |
| `data-flavour-color` | `.flavour-panel` | hex colour | `#F2AE1C` | Section ground colour while this flavour is active |
| `data-flavour-word` | `.flavour-panel` | text | empty | Giant background word behind the can |
| `data-hero-can` / `data-stage-can` / `data-buy-can` | can wrappers | presence | off | Marks cans for the hero rise, flavour swap, and buy trio |

### Accessibility

- **Reduced motion**: both the CSS media query and a `gsap.matchMedia` branch serve a complete static page; the flavour section stays as stacked cards.
- **No JavaScript**: the markup is a plain, fully readable document; every animation is an enhancement on top.
- **Keyboard**: focus mirrors hover on the sticker cards, and all interactive elements are real links with visible focus outlines (cream on dark grounds).
- **Screen readers**: decorative pieces (fizz, badge, ticker, duplicate cans) are `aria-hidden`.

### Dependencies

- [GSAP 3](https://gsap.com) core + ScrollTrigger (CDN)
- [Lenis](https://lenis.darkroom.engineering/) smooth scroll (CDN, optional)
- Google Fonts: Unbounded, Figtree, DM Mono

### Browser Support

All modern browsers. The layout uses CSS grid, `aspect-ratio`, individual `rotate` properties, and `position: sticky`, so it needs a browser from roughly 2022 onwards.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/script.min.js`: minified production build
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. 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 Product Launch Template](https://gsapvault.com/templates/product-launch-template)
- [All-Access Bundle (£29 one-time, best value): every current and future effect and template](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