# 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. Canonical: https://gsapvault.com/templates/interior-design-studio-template Live demo: https://gsapvault.com/demos/interior-design-studio-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £10 | | Difficulty | advanced | | Plugins | ScrollTrigger | | Techniques | scroll-reveal, stagger, before-after, clip-path, drag | | Uses Lenis | Yes | ## Overview A production-ready site for a small interior design and renovation studio, built to look like a working practice rather than a stock template. It runs on a warm greige ground with near-black type and a single burnt-sienna accent held back for links, one primary button and small markers, so the rooms themselves carry the colour. The signature is a before/after slider. Each room transformation is drawn entirely in CSS and SVG, the bare cold original underneath and the finished warm redesign on top, and a draggable divider wipes one over the other through a clip-path. Two or three rooms sit behind tabs, and the whole thing is driven by a visually hidden range input, so it is keyboard operable, works under touch, and settles at a readable half-and-half split with no JavaScript at all. The page is structured the way a studio pitches: a restrained editorial hero, a projects introduction, the before/after as the centrepiece, an approach and services list, a materials detail band, a client testimonial and a plain enquiry section. Copy is written for a fictional Bristol studio in a dry, confident voice, and because every room is drawn rather than photographed the template ships with no image files to license or replace. ## Features - Complete deployable one-page site: sticky nav, editorial hero, projects intro, before/after signature, approach and services, a materials band, a testimonial, an enquiry section and footer - Signature before/after slider: a draggable divider wipes the finished redesign over the bare original through a clip-path inset - Every room is drawn in CSS and SVG, no photography: the cold stripped 'before' and the warm furnished 'after' share the same wall, window and floor geometry so the wipe transforms one space - Two rooms behind tabs (a living room and a kitchen), each with its own before and after scene, extendable by copying one panel block - Driven by a visually hidden range input, so the divider is keyboard operable, works under touch, and needs no pointer library - Degrades to a static half-and-half split with both states visible when JavaScript is off, and to the same split under reduced motion - Masked serif hero lines rise on load, and each section reveals on scroll with a restrained stagger - Semantic token block with RGB triples behind every translucent value, so a reskin is a handful of edits - Sticky nav with an accent primary action, and a projects strip drawn as poster tiles rather than image holes - Lenis smooth scrolling wired in and fully optional - Accessible: the slider carries a real label and reports its value, tab controls are proper buttons, and contrast is measured as used with body copy at 5.6:1 or better ## Use Cases - Interior design studios, decorators and renovation practices - Architecture and build firms that want to show a space before and after work - Home staging, property styling and refurbishment services - Kitchen, bathroom and joinery fitters presenting transformations - Any trade whose sale is a visible change to a room or object: landscaping, restoration, upholstery - Studios that want a drawn, license-clean site with no stock photography to source ## How It Works ### Structure One script initialises every section inside a single gsap.context with gsap.matchMedia, keyed only on reduced motion so exactly one branch runs on any device. Every section is looked up behind a guard, so a buyer can delete the testimonial, the materials band or an entire room and the rest still initialises. Interaction wiring for the slider runs in both motion branches; only the scroll reveals are gated behind the motion preference. ### The before/after slider The two room states are stacked, the finished one on top, and a single custom property sets how far it is revealed. The finished layer is clipped with clip-path: inset(0 calc(100% - var(--pos)) 0 0), so at 50 it shows on the left half and the bare room shows through on the right, and the divider and handle read the same property. A visually hidden range input is the source of truth: its input event writes the property and its value, which is why keyboard, touch and mouse all work without a drag library. ### Rooms without photographs Each room is two SVG scenes over a CSS shell, not an image. The before and after share the same wall, window frame, cornice and floor so the divider reveals a change to one room rather than two different pictures; the before is desaturated and empty with a bare bulb and a cold window, and the after adds furniture, a rug, art, plants and a warm light wash. Because nothing is a bitmap, the scenes stay crisp at any width and the template carries no files to license, grade or swap. ### Reduced motion and no JavaScript The range input has a default value of 50, and CSS sets the reveal property to 50% up front, so with scripting disabled the slider renders both room states split down the middle and every word on the page is readable. The reduced-motion branch does the same and skips only the load and scroll animations, showing the finished page in place. No content is ever hidden behind an ungated opacity or a control that only JavaScript can operate. ## 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. Upload the whole folder to any static host. No build step. 2. Open `index.html` and replace the studio name, nav links, copy, project names and footer with your own. 3. Edit the token block at the top of `assets/style.css` to reskin (see **Palette**). 4. Keep the three CDN `