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.
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.
Read the full template overview
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
Structure and hero motion
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 flavour switcher
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.
Reduced motion
A prefers-reduced-motion branch leaves the fully-visible static markup untouched.
Questions about this template
The cans are drawn in CSS. Can I use photos of my actual product instead?
Yes, and most buyers should. The CSS cans exist so the template ships with nothing to license and no placeholder watermarks. Replace the can element with an <img> of your product cutout on transparent PNG and the hero, flavour switcher and grid all keep working; the retint still drives the background.
What does the flavour switcher actually do?
It is the signature moment: the product stays pinned while you scroll, and the entire section background retints as the can swaps between flavours. It reads as one continuous idea rather than a carousel. Each flavour is a colour value and an image, so three flavours or seven both work.
Can I use it for something that isn't a drink?
Yes. The structure is product hero, benefits, variant switcher, stockists, buy, and nothing in that is drink-specific once you swap the can. It has been built for candles, cosmetics and snack brands as easily as canned drinks; the variant switcher suits anything sold in more than one scent, shade or flavour.
Does the buy button take payment?
No. It is styled and unwired on purpose. Point it at your Shopify product page, a Stripe payment link or a pre-order form. Keeping checkout off the template is deliberate: nobody should be running payments through a static page they just downloaded.
Will the fizz bubbles slow down a phone?
No. The bubbles pause automatically when the hero scrolls off screen rather than animating against a hidden element, and they stop entirely under reduced motion. That off-screen pause is the difference between an ambient effect and a battery drain.
