# GSAP Vault > Production-ready GSAP animation effects and complete page templates. Copy-paste code you can ship as-is or customise. Canonical: https://gsapvault.com ## What this is GSAP Vault sells two kinds of product: **66 animation effects** (single, self-contained patterns you drop into an existing build) and **54 page templates** (complete, deployable one-page sites). Everything is plain HTML, CSS and JavaScript with GSAP loaded from a CDN. There is no build step and no framework lock-in. GSAP Vault is an independent project and is not affiliated with, endorsed by, or sponsored by GreenSock, Inc. ## Pricing - Effects: £5 each - Templates: £10 each - Effects & Templates Vault: £39 one-time for every current and future effect and template - 8 effects are free The standard licence covers unlimited personal and commercial projects. The only restrictions are no redistribution and no competing products. ## Browse - [All effects](https://gsapvault.com/effects) — 66 animation patterns - [All templates](https://gsapvault.com/templates) — 54 complete one-page sites - [Categories](https://gsapvault.com/categories) — effects grouped by technique - [Blog](https://gsapvault.com/blog) — tutorials and announcements - [FAQ](https://gsapvault.com/faq) - [Getting started](https://gsapvault.com/getting-started) ## Free effects - [3D Card Flip Gallery](https://gsapvault.com/effects/3d-card-flip): Tactile 3D cards with deep perspective, reactive edge-light, shadow inversion, hover/focus parity, and tap auto-close. - [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript. - [Hover Underline](https://gsapvault.com/effects/hover-underline): Three material link underlines (an exit-through line, marker sweep, and hand-drawn wave) with coordinated type and active-index responses. - [Image Clip Reveal](https://gsapvault.com/effects/image-clip-reveal): A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its editorial caption lands. - [Parallax Hero](https://gsapvault.com/effects/parallax-hero): A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger. - [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress): A precise GSAP reading-progress instrument with bar, ring, side rail, percentage, and active chapter feedback. - [Scroll Text Highlight](https://gsapvault.com/effects/scroll-text-highlight): A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted. - [Typewriter Text](https://gsapvault.com/effects/typewriter-text): A sharp terminal-style typewriter that types, holds, accelerates through deletion, and cycles to the next phrase in sync with cursor and progress signals. ## Templates - [Advertising Agency Template](https://gsapvault.com/templates/advertising-agency-template): A one-page site for a full-service ad agency, opening on a hero whose background is a pinned, scroll-scrubbed reel of location photography, before a capabilities marquee that skews in proportion to how fast the visitor is scrolling right now, tracked live with the GSAP Observer plugin. Six real campaign case studies with results stats, a CSS-only discipline filter, and an honest process rail sit either side of it. - [AI Studio SaaS Template](https://gsapvault.com/templates/ai-studio-saas-template): A saturated editorial SaaS template with an aperture-led type hero, a scroll-directed visual sequence, and a clickable art-direction mixer. - [Architecture Studio Template](https://gsapvault.com/templates/architecture-studio-template): A complete one-page site for an architecture practice: a scroll-scrubbed blueprint hero that draws a building elevation in orange linework and crossfades into the finished photograph, plus a project index with live preview swaps, count-up stats, and a parallax featured project. - [Art Gallery Template](https://gsapvault.com/templates/art-gallery-template): A one-page site for a contemporary art gallery, built on a cool white ground with one vermilion, whose signature is a walk-the-wall exhibition: the section pins and vertical scroll pans a hang of CSS-drawn artworks sideways, with a medium filter that re-hangs the wall. - [Barber Shop Template](https://gsapvault.com/templates/barber-shop-template): A complete one-page site for a barber shop, built on an aubergine ground with heavy slab type, and a three-step booking flow with a running summary as its signature. - [Draggable Dashboard Template](https://gsapvault.com/templates/bento-grid-template): A calm project-dashboard landing page with draggable, keyboard-reorderable widgets, a practical build-your-workspace section, expandable release rooms and split-flap metrics. - [Bookshop Template](https://gsapvault.com/templates/bookshop-template): A complete one-page site for an independent bookshop, built around a spine wall: a shelf of art-directed CSS book spines where pulling one tips the book out in 3D and opens it on the table below, cover and staff blurb on facing pages. - [Branding Studio Template](https://gsapvault.com/templates/branding-studio-template): An editorial one-page site for a brand and identity studio: a contents index of typographic plates you throw sideways with a finger, display headings cut in a variable serif that arrive light and set themselves once as they come into view, and a featured project laid out as a proper article with a drop cap, marginalia and numbered notes. Four measured palettes ship. - [Charity Campaign Template](https://gsapvault.com/templates/charity-campaign-template): A free one-page river-restoration appeal built around a draggable before/after comparator: a gauge-board divider wipes between the degraded and the restored river, and every figure on the page counts like a reading. - [Cocktail Bar Template](https://gsapvault.com/templates/cocktail-bar-template): A complete one-page site for a 1920s speakeasy, built on a deep teal-black ground with brass deco linework, whose signature is a build-your-cocktail glass that pours coloured liquid layers as you pick a base spirit and mixers. - [Coffee Roaster Template](https://gsapvault.com/templates/coffee-roaster-template): A complete one-page shop for a small coffee roaster, built on an espresso ground with one acid-green accent, and a working demo basket with a fly-to-basket arc, grind selection and a live subtotal as its signature. - [Coming Soon Template](https://gsapvault.com/templates/coming-soon-template): A free single-screen holding page dressed as a picture house: a projector beam rakes across a dark auditorium, a house light wanders the room, and the countdown is an Academy leader whose sweep hand turns continuously while the day count cuts once a day. - [Craft Brewery Template](https://gsapvault.com/templates/craft-brewery-template): A one-page brewery and taproom site where a draggable spinning can is the hero: the only saturated object on an industrial gunmetal shell, and picking a beer retokens the whole page. - [Creative Portfolio Template](https://gsapvault.com/templates/creative-portfolio-template): A complete one-page studio portfolio built from GSAP Vault effects: split-text hero, client logo marquee, stagger grid work section, pinned horizontal case studies, count-up stats, and magnetic buttons. - [Developer Portfolio Template](https://gsapvault.com/templates/developer-portfolio-template): A one-page portfolio for a solo engineer, built around a workbench panel where each snippet types itself out character by character while the preview beside it builds, then runs the exact code you just read. - [Documentation Site Template](https://gsapvault.com/templates/documentation-template): A complete six-page documentation site on a clean near-white reading surface, with a proper dark theme and a cool slate alternate shipped as one-attribute palette swaps: fixed top bar, cross-linked sidebar tree, article column and scrollspy "On this page" rail on every page, built around a Cmd+K command palette that fuzzy-searches an index read live from the site's navigation and the current page's headings. - [Editorial One Page Template](https://gsapvault.com/templates/editorial-one-page-template): A vertical-agnostic editorial one-pager whose cover exists twice: a chalk plate on top and an ink negative beneath it, revealed through a soft aperture that follows the cursor and stretches on the axis it is moving along. - [Email API SaaS Template](https://gsapvault.com/templates/email-api-template): A complete one-page landing site for a transactional email API, set like airmail stationery: outbound letters fly into the hero's sorting tray on a timed stream, filterable by email type, each one openable to its delivery report and frankable DELIVERED with a rubber-stamp thunk. - [Fashion Drop Template](https://gsapvault.com/templates/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. - [Financial Planner Template](https://gsapvault.com/templates/financial-planner-template): A complete one-page site for an independent financial planner, centred on a draggable life-plan timeline that redraws an illustrative projection and updates the planning conversation live. - [Fine Jewellery Template](https://gsapvault.com/templates/fine-jewellery-template): A cold-luxury two page site for an independent jewellery house: a raking light you sweep across a single piece to move its exposure, its specular streak, its cast shadow and its colour temperature at once, plus a twelve piece shop page with a Flip-powered category filter, add to cart on every piece and a front-end selection drawer shared across both pages. - [Food Truck Template](https://gsapvault.com/templates/food-truck-template): A complete one-page site for a street-food truck, built around an illustrated route map: pick a day of the week and the van drives along the route to that day's pitch with MotionPathPlugin, wheels turning, exhaust puffing on arrival, each pin revealing a photo of its pitch. - [Holiday Let Template](https://gsapvault.com/templates/holiday-let-template): A complete one-page site for a single holiday cottage or cabin, built around a draggable date-range availability calendar that refuses to span nights already taken and prices every night on its own season. - [Incident Alerting SaaS Template](https://gsapvault.com/templates/incident-alerting-template): A complete one-page SaaS landing site for an uptime monitoring and incident alerting product, built around a live alert wire: monitor events arrive on a timed stream, shunt the list down, tick the hero counters, and expand into incident detail cards on hover or focus. - [Indie Magazine Template](https://gsapvault.com/templates/indie-magazine-template): A complete single-issue site for an independent print magazine, set like a broadsheet front page: a cover headline that typesets itself letter by letter, and pull quotes that grow on scroll while the newspaper columns re-wrap around them live. - [Interior Design Studio Template](https://gsapvault.com/templates/interior-design-studio-template): A complete one-page site for a boutique interior design studio on a warm greige ground, with a draggable before/after slider that wipes a redesigned room over the bare original as its signature. - [Investigative Story Template](https://gsapvault.com/templates/investigative-story-template): A one-page investigation for a news publication: a full-bleed lead clip under the headline, three scroll-locked stages where a pinned media column crossfades photograph to photograph as three steps of reporting scroll past it, redacted documents whose bars wipe off as you read, and a right-of-reply statement block. - [Landing Page Template](https://gsapvault.com/templates/landing-page-template): A vertical-agnostic one-page site whose identity is structural: bands alternate hard between two tones, and the fixed nav and reading rail invert themselves against whatever is behind them using mix-blend-mode rather than script. - [Link Hub Template](https://gsapvault.com/templates/link-hub-template): An editorial link-in-bio page for a fashion model and lifestyle creator: a Didone contents index whose covers follow the cursor and cross-fade as you move down the list, with a shipping four-palette persona switcher. - [Link in Bio Template](https://gsapvault.com/templates/link-in-bio-template): A free creator profile page whose link cards toss onto the page like stickers landing on a desk, drag anywhere with momentum, and tween back into a neat stack on 'Tidy up' - while a tap always just opens the link. - [Long-Form Story Template](https://gsapvault.com/templates/long-form-story-template): A one-page long read laid out for reading: a single 68-character measure on a pale celery ground, a sticky chapter spine with a scrubbed plum progress thread, inline-SVG figures that break the column, and four principle cards that stack into a deck as the section pins. - [Music Festival Template](https://gsapvault.com/templates/music-festival-template): An editorial three-day festival site with an interactive vinyl hero, accessible lineup filters, dependable nightly timetables, selectable venue gallery, sponsor logo system, tickets, and practical information. - [Nail Studio Template](https://gsapvault.com/templates/nail-studio-template): A complete one-page site for a boutique nail studio, built on a butter ground with one lacquer red, and a live shade try-on that paints a photographed hand coat by coat as its signature. - [Observatory Template](https://gsapvault.com/templates/observatory-template): A complete one-page site for a public observatory or planetarium, built around scroll-drawn constellations: hand-plotted star maps that DrawSVG connects line by line as each section arrives, over a three-layer parallax starfield. - [Online Course Template](https://gsapvault.com/templates/online-course-template): A complete one-page site for selling a single online course, built around a draggable pace planner: set your hours per week and watch the curriculum re-pack itself into real weeks with a live finish date. - [Photography Portfolio Template](https://gsapvault.com/templates/photography-portfolio-template): A complete one-page photographer's portfolio on a mid-tone gallery-wall ground, with a signature loupe: a circular magnifier that tracks the cursor across a desaturated contact sheet and is the only place colour appears. - [Podcast Show Template](https://gsapvault.com/templates/podcast-show-template): A complete one-page site for a podcast or audio show, built on a deep wine ground with one hot pink accent, and a real drag-to-scrub waveform player with chapter markers as its signature. - [Product Launch Template](https://gsapvault.com/templates/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. - [QR Table Menu Template](https://gsapvault.com/templates/qr-menu-template): A phone-first digital menu made to open from a QR code at the table, with a sticky category bar that crossfades between sections and dietary chips that filter every dish at once. - [Real Estate Template](https://gsapvault.com/templates/real-estate-template): A four-page estate agency site on a deep petrol ground, with a GSAP Flip shared-element transition that carries a listing photograph across a real page navigation into the property hero. - [Record Label Template](https://gsapvault.com/templates/record-label-template): A complete independent record label site on a saturated magenta ground, with a rack of designed vinyl sleeves whose records slide out and become genuinely drag-spinnable turntables with inertia, motion smear and an elastic settle. - [Recruitment Agency Template](https://gsapvault.com/templates/recruitment-agency-template): A complete one-page recruitment agency template for specialist hiring studios, pairing candid editorial art direction with a kinetic talent-network hero, live Flip-powered role matching, a scroll-drawn three-step method, candidate stories, and a full employer brief dialog. - [Restaurant Template](https://gsapvault.com/templates/restaurant-template): A complete one-page restaurant site with a candlelit dark art direction: full-bleed photo hero with a spaced-caps wordmark reveal, and a signature hover image trail that conjures dish photographs as the cursor moves across the tasting menu. - [Resume Template](https://gsapvault.com/templates/resume-template): A personal CV site that morphs between two layouts: a signature Flip-driven toggle reflows the whole page from a spacious web resume into an A4 document, backed by a real print stylesheet so the site is also the PDF. - [SaaS Landing Page Template](https://gsapvault.com/templates/saas-landing-template): A hard-edged Swiss landing page for a B2B software product, built around an interactive product mockup: switching feature tabs redraws the mini-UI inside the app window, so visitors drive the console instead of looking at a screenshot of it. - [Sports Club Template](https://gsapvault.com/templates/sports-club-template): A complete one-page site for a semi-professional football club, painted edge to edge in one saturated kit colour with the club name set at poster scale across a full-bleed photograph, built around a draggable season scrubber that turns a plain results list into an instrument: throw it and the scoreline, points, league position, form guide and position curve all answer to the same finger. - [Strength Gym Template](https://gsapvault.com/templates/strength-gym-template): A complete one-page site for a barbell club or strength gym, built around a one-rep-max calculator that prescribes every week of a twelve-week block and draws the plates you actually have to load. - [Tattoo Studio Template](https://gsapvault.com/templates/tattoo-studio-template): A complete one-page site for a tattoo studio, built around a flash-sheet picker: choose a design off the sheet and watch its linework ink itself stroke by stroke with DrawSVG, black lines first, red packed in last. - [Team Chat App Template](https://gsapvault.com/templates/team-chat-template): A dark-mode team chat web-app UI whose conversation plays itself: a choreographed GSAP replay of launch morning with typing indicators, landing messages, popping reactions, a mention sweep and a thread that opens on cue, inside a full app shell with channel switching, a composer and a mobile drawer. - [Theatre Venue Template](https://gsapvault.com/templates/theatre-venue-template): A complete repertory theatre site with an oxblood playbill identity and a production selector whose stage curtains close, change the show at full cover, then open into a settling house-light glow. - [Travel & Tour Template](https://gsapvault.com/templates/travel-tour-template): A complete one-page site for a boutique small-group tour operator, built on a lagoon-teal ground with a coral accent, and an interactive itinerary map whose route line draws itself in as its signature. - [Web Design Agency Template](https://gsapvault.com/templates/web-design-agency-template): A one-page site for a web design and development studio, built around a browser mockup that scroll-scrubs through the three stages of a real project: wireframe, then structure, then the finished thing. Services lead with plain price bands and timelines, and the whole page is keyed to one brand colour you swap. - [Wedding Template](https://gsapvault.com/templates/wedding-template): A wedding one-pager with one job, getting guests to RSVP, built as a stationery suite on champagne and card stock, with a reply card that writes itself in typewriter text and posts itself in an envelope on submit. - [Wellness Studio Template](https://gsapvault.com/templates/wellness-studio-template): A complete one-page site for a yoga or movement studio, built on a saturated terracotta ground, with a full-week class timetable and an interactive 4-7-8 breath guide as its signature. --- Every page has a Markdown variant: append `.md` to an effect, template, blog or category URL (the /effects, /templates and /blog listings too), or send `Accept: text/markdown`. Full catalog for agents: https://gsapvault.com/llms-full.txt (120 products).