# Animated Website Templates

> Complete one-page websites built with GSAP: scroll and text animation baked in, plain HTML, CSS and JavaScript, ready to deploy.

Canonical: https://gsapvault.com/templates

57 templates at £10 each (4 free), or every current and future effect, template and UI element is £39 one-time with [The Vault](https://gsapvault.com/pricing).

Every template page has a Markdown variant: append `.md` to its URL or send `Accept: text/markdown`.

## Templates (57)

- [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) (free): 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) (free): 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.
- [Layered Depth Template](https://gsapvault.com/templates/layered-depth-template): A spatial and exhibition design studio site built as translucent planes in a lit room: a scroll-driven depth pass, a cursor-tilted cluster, and planes that flatten to full bleed.
- [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) (free): 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.
- [Poster Grid Template](https://gsapvault.com/templates/poster-grid-template): A one-page site for a poster biennale, built on a twelve-column rule grid that is printed on the page rather than hidden behind it: the grid draws itself in as measured rules while the headline sets column by column, four photographic plates reflow between fixed compositions with GSAP Flip, and a marginalia rail down the outer column tracks scroll on three channels at once.
- [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) (free): 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.
- [Split Screen Template](https://gsapvault.com/templates/split-screen-template): A one-page site for an independent industrial design studio, built as two committed full-height fields — an ochre one and a near-black one — divided by a seam the visitor can actually drag. Scroll sends the two fields in opposite directions, the headline straddling the divide is knocked out correctly on both grounds, project plates are dealt out from the seam in a pinned sequence, and a second seam further down bends toward the cursor.
- [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.

## Browse templates by use case

- [Portfolio & personal](https://gsapvault.com/templates/category/portfolio-personal): Templates for showing your own work: studio portfolios, developer sites, photography, and CVs.
- [Business & services](https://gsapvault.com/templates/category/business-services): Templates for practices and service businesses that sell expertise, sessions, or projects.
- [Commerce & product](https://gsapvault.com/templates/category/commerce-product): Templates built around selling a product: launches, drops, and single-product pages.
- [Events & hospitality](https://gsapvault.com/templates/category/events-hospitality): Templates for places and dates: festivals, venues, restaurants, and bookable experiences.
- [Landing & marketing](https://gsapvault.com/templates/category/landing-marketing): Conversion-focused one-pagers that adapt to any vertical, including software product pages.
- [App & dashboard UI](https://gsapvault.com/templates/category/app-ui): Working web-app interfaces: chat apps, documentation sites, and dashboard shells you deploy as the product front-end itself.

Full catalog for agents: https://gsapvault.com/llms-full.txt