# Fashion Drop Template > A stark one-page drop site for a limited clothing release: live countdown in the hero and sticky bar, a draggable lookbook card deck, a scarcity-driven product grid, and a first-access waitlist built for conversion. Canonical: https://gsapvault.com/templates/fashion-drop-template Live demo: https://gsapvault.com/demos/fashion-drop-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £5 | | Difficulty | beginner | | Plugins | Draggable, InertiaPlugin, ScrollTrigger | | Techniques | draggable, momentum, countdown, scroll-reveal, stagger, hover-effect, marquee | | Uses Lenis | Yes | ## Overview A production-ready one-page drop site for streetwear labels, limited releases, and product launches that live or die by urgency. The art direction is a cold near-black ground with off-white stencil display type and one signal-red accent, with every photo pulled into the same campaign by a high-contrast desaturated treatment and red tint. A live countdown runs in the hero and the sticky utility bar, the signature lookbook deck lets visitors drag and flick through campaign cards with momentum, edition counts and animated scarcity bars run through the product grid, and repeated first-access CTAs funnel everything to a hero-grade waitlist form. Swap the photos, copy, and drop date for your own release and deploy anywhere as static files. ## Features - Complete deployable one-page site: sticky bar, countdown hero, lookbook deck, red CTA band, product grid, manifesto, drop rules, waitlist, footer - Draggable lookbook card deck with inertia flicks, snap-back, grab-lift shadows, infinite cycling, button plus arrow-key controls, and a live look index that tracks the top card - Live drop countdown shared by the hero and sticky bar, with a digit scramble garnish on load - Staggered hero intro over a giant ghost edition number, print-sheet spec marks, and a stencil ticker strip (pure CSS marquee, runs without JavaScript) - Garment-tag design system in pure CSS: barcode marks at three sizes, spec-ref section headers, SKU rows on every product card, a ticket-stub first-access pass, and a barcode footer mark - Structural devices running the full page: vertical margin rules, hazard-tape seams on the red band and footer, ghost stencil numerals, red title rules, a reversed second ticker, and CTA buttons that roll live hazard tape across themselves on hover - Finishing details throughout: film grain over the ink ground, numbered chips on every product photo, and a rubber stamp that slams onto the manifesto on scroll - Conversion-focused layout: repeated first-access CTAs, urgency microcopy, and a hero-grade signup form - Edition counts and animated scarcity bars on every product card - Product photos snap from the mono campaign grade to full colour on hover or focus, with a demo add-to-cart button that slides over the photo, intentionally unwired and ready to point at your checkout - Unified campaign photography bundled as optimised WebP files with the high-contrast grade baked in, plus red overlays and background fallbacks - Lenis smooth scrolling wired in and fully optional - Accessible: reduced motion gets a static lookbook spread and full page, focus mirrors hover, no-JS keeps every word readable ## Use Cases - Streetwear and independent clothing label drops - Limited edition product releases with a fixed on-sale moment - Sneaker, print, or collectible launches that need a waitlist - Pre-launch landing pages built around a countdown - Learning how Draggable, InertiaPlugin, and ScrollTrigger compose into a full page ## How It Works One script initialises each section inside a single gsap.context with gsap.matchMedia, skipping any section it cannot find. The lookbook deck adapts the draggable card stack pattern: Draggable with InertiaPlugin measures release velocity to decide whether the top card flies off or springs back with an elastic ease, and buttons and arrow keys drive the same dismiss and restore tweens. Both countdowns share one setInterval clock computed client-side, with a gsap tween scrambling the digits into place on load. Scroll reveals, the manifesto stamp slam, and scarcity bars animate once via ScrollTrigger; the ticker strip is a pure CSS marquee so it runs even without JavaScript; and a prefers-reduced-motion branch leaves the deck as a static spread grid with everything visible and the ticker frozen. ## 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. Open `index.html` in a browser.** The template is fully self-contained; GSAP, Draggable, InertiaPlugin, ScrollTrigger, and Lenis load from CDN. **2. Make it yours:** - Replace the text content in `index.html` (label name, garments, fabric specs, prices, edition counts, rules) - Set your real drop date (see Countdown below); the default is 21 days from each visit - Swap the placeholder photos (see Photography below) - Wire the first-access form to your email provider (see First Access Form below) - Change the palette by editing the custom properties at the top of `assets/style.css`: `--ink` (ground), `--bone` (type), `--red` (the single accent), plus `--panel`, `--line`, `--dust` **3. Deploy.** Static files, no build step. Any host works: Netlify, Vercel, GitHub Pages, or a plain server. For production, swap `script.js` for `script.min.js` in `index.html`. ### Accessibility - **Reduced motion**: `prefers-reduced-motion: reduce` renders the whole page static; the lookbook becomes a spread grid with all cards visible, scarcity bars show final widths, the ticker freezes, and the countdown still ticks (a text update, not motion) without the scramble garnish - **Keyboard navigation**: the deck responds to arrow keys and its buttons are real `