Product Launch Template 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.
About This Template
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.
What's Included
- 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
Perfect For
- 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.