# Website Sections Complete website sections with considered layouts and GSAP animation. Edit the content, colours and fonts. Available only in the Vault for now while the collection is small. Currently included in the Vault: https://gsapvault.com/pricing. Existing Vault owners have access. Not currently available to buy individually or as a separate Sections pass. ## Studio Team Story An editorial founder introduction where selecting a person changes the working story and reframes a shared studio photograph. [Preview and documentation](https://gsapvault.com/sections/studio-team-story-section) ## Team Through the Project A single team photograph travels between six people as their individual stories enter view during the scroll. [Preview and documentation](https://gsapvault.com/sections/team-directory-section) ## Event Schedule A practical two-day event programme with day selection, session filters and preparation notes, framed by a bold photographic event rail. [Preview and documentation](https://gsapvault.com/sections/event-schedule-section) ## Searchable FAQ A complete help section with searchable answers, topic filters, native disclosures and a clear route to a real person. Built around a warm editorial workspace example. [Preview and documentation](https://gsapvault.com/sections/searchable-faq-section) ## Pricing Comparison A complete SaaS pricing section with three comparable plans, monthly and yearly billing, clear annual totals and a focused plan-selection handoff. [Preview and documentation](https://gsapvault.com/sections/pricing-comparison-section) ## Peel to Reveal Offer A SaaS promotion section with one tactile peelable voucher, a revealed coupon code and a complete copy-to-redemption demonstration. [Preview and documentation](https://gsapvault.com/sections/peel-offer-section) ## Isometric Project Wall An architectural photography portfolio section with a drifting isometric image wall, a stable six-project index, readable project summaries and a square-on image viewer. [Preview and documentation](https://gsapvault.com/sections/isometric-project-wall-section) ## Service Pathway A photographic service chooser that keeps three client situations, the active offer, practical fit and a clear next step together in one confident studio section. [Preview and documentation](https://gsapvault.com/sections/service-pathway-section) ## Customer Proof Ledger A photography-led customer story section pairing three clear customer choices with a large workplace image, illustrative result, quote and expandable working note. [Preview and documentation](https://gsapvault.com/sections/customer-proof-ledger-section) ## Transformation Stories A photography-led transformation section with three room stories, a flexible before-and-after comparison and concise design notes beside the image. [Preview and documentation](https://gsapvault.com/sections/transformation-stories-section) ## Editorial Project Carousel An art-book featured projects carousel with a dominant image stage, synchronized project facts and outcomes, visible folio progress, case-study links and complete keyboard, button and swipe navigation. [Preview and documentation](https://gsapvault.com/sections/editorial-project-carousel-section) ## Spatial Product Range A product-first range selector with generated speaker cutouts, a seamless spatial carousel and complete fallback product cards. [Preview and documentation](https://gsapvault.com/sections/spatial-product-range-section) ## Time of Day Hero A hero for a place that changes through the day: a giant photographic dial turns to the daypart on show, and the panel, headline and colour ground change with it. [Preview and documentation](https://gsapvault.com/sections/time-of-day-hero-section) ## Alpine Stage Route Hero A cycling hero with two selectable Alpine mountain sprints, original aerial landscapes and animated road-aligned routes. [Preview and documentation](https://gsapvault.com/sections/route-planner-hero-section) ## Colour Chapter Showcase A photography-led editorial section whose entire canvas changes colour as you scroll between three generously composed chapters. [Preview and documentation](https://gsapvault.com/sections/colour-chapter-showcase-section) ## Kinetic Type Hero A playful studio hero where five oversized letter objects form a bold composition visitors can drag, nudge, shuffle and reset. [Preview and documentation](https://gsapvault.com/sections/kinetic-type-hero-section) ## Photo Marquee Gallery A complete photographic showcase with a bold editorial masthead and two edge-to-edge image rows travelling continuously in opposite directions, plus click-to-pause controls, a built-in photo lightbox and static browsing fallbacks. [Preview and documentation](https://gsapvault.com/sections/photo-marquee-gallery-section) ## Editorial Case Study A photography-led architecture case study with an indexed focal image, project narrative, key facts and a measured outcomes ledger in one refined editorial section. [Preview and documentation](https://gsapvault.com/sections/editorial-case-study-section) ## Product Feature Story An editorial product feature section where a numbered chapter rail changes the inspected photography, technical facts and substantial story together with a refined, interruptible transition. [Preview and documentation](https://gsapvault.com/sections/product-feature-story-section) ## Image-led Hero A composed editorial hero that lets one strong photograph carry the setting, while a large crossing headline, practical stay details and a direct booking action give it purpose. [Preview and documentation](https://gsapvault.com/sections/image-led-hero-section) ## How is a website section different from an effect or a UI element? An effect provides an animation technique; a UI element provides a control such as tabs or a modal. A website section is a complete content composition: layout, typography, imagery and interaction together. A template supplies a whole website. ## How do I get the sections? While the collection is small, website sections are available only in the Vault for now, for both existing and new owners. They are not available to buy separately, either individually or as a Sections pass. Sign in with your Vault account to download the source. The Effects, Templates and UI Elements passes do not include sections. ## Can I change the design? Yes. Change text, links and images in the HTML, and use the documented CSS variables for colours, fonts and spacing. Some sections may include additional themes; the available choices are listed on each product. There is no shared theme system to install. ## Do sections need a framework or a build step? No. The downloads contain HTML, CSS and JavaScript, with the dependencies and setup documented. Add the section to an existing page or adapt it to your project. Each section documents its keyboard, mobile and reduced-motion behaviour.