# 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. Canonical: https://gsapvault.com/templates/real-estate-template Live demo: https://gsapvault.com/demos/real-estate-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £5 | | Difficulty | advanced | | Plugins | ScrollTrigger, Flip | | Techniques | page-transition, flip-layout, svg-animation, scroll-reveal, stagger, filter, hover-effect, text-animation | | Uses Lenis | Yes | ## Overview A complete, deployable site for an estate agency or property practice, and the first GSAP Vault template that is genuinely multi-page: a home page, a filterable register of listings, a full property detail page and a practice page, all sharing one nav, one stylesheet and one script. The signature is a shared-element page transition. Clicking a listing card freezes its photograph on screen, veils the page and navigates; the property page picks the photograph up at the same screen coordinates and uses GSAP Flip to fly it into the hero frame, so an ordinary browser navigation reads as one continuous move. The art direction is three colours and nothing else: a deep petrol ground, chalk type, and warm sand used only for references, prices and one solid button. Photography is bundled as art-directed WebP derivatives baked to a cool petrol grade so nineteen unrelated frames read as one campaign, and the copy is written for a fictional Bath agency in a dry, unshowy voice. ## Features - Four complete pages sharing one nav, one stylesheet and one script: home, register, property detail and practice - Signature shared-element transition built on GSAP Flip, carrying a listing photograph across a real page navigation into the property hero - The transition degrades to a plain link with no JavaScript, no Flip, no sessionStorage, under reduced motion, or on any modified click, and it clears itself on back/forward-cache restores - Filterable register: four filters reflow the listing grid with Flip, with a live count and a filter bar that never appears without JavaScript - Property page with a keyboard-accessible gallery, a hand-drawn SVG floorplan that strokes itself in on scroll, a sketch location map and walking times - Practice page with team, area notes carrying real price ranges, and a full valuation form - Nineteen bundled photographs baked to a cool petrol grade, around 1.7MB total, with per-image brightness so mixed sources match - Three-colour token block: change petrol, chalk and sand and the whole practice reskins - Instrument Serif, Onest and Sometype Mono, each with one job: names and prices, reading copy, and register references - Lenis smooth scrolling wired in and fully optional ## Use Cases - Estate agencies, letting agents and property practices - Property developers presenting a scheme with individual unit pages - Architects and interior practices with a project index and project detail pages - Holiday lets, serviced apartments and short-stay portfolios - Any multi-page catalogue site where an item grid leads to an item detail page ## How It Works One script runs on all four pages inside a single gsap.context and a gsap.matchMedia keyed only on reduced motion, so exactly one branch always matches whatever the device. Every section is found by a [data-*] hook and guarded, so a buyer can delete any section or any page. The transition works in two halves. On departure, a click handler records the clicked photograph's exact getBoundingClientRect and its src into sessionStorage, paints a fixed clone at that rect and fades a veil in over the page, then navigates; the clone deliberately does not move, because the arriving page can only line up if the recorded rect is still true at the moment of navigation. On arrival, the property page reads the payload, immediately clears it, and ignores anything older than five seconds so a later visit or a back button cannot replay it. It then rebuilds the clone at the recorded coordinates, takes Flip.getState, sets the clone to the hero image's rect and runs Flip.from, which animates width and height rather than scale so object-fit stays honest for every frame. The veil fades out under the moving image and the clone cross-fades onto the real hero at the end. The listing card crop and the property hero frame share the same aspect ratio, so the landing is seamless. The same Flip plugin animates the register filter's reflow. The floorplan is drawn with plain stroke-dashoffset rather than a DrawSVG dependency, and reveal targets are hidden in CSS only after GSAP is confirmed present, so a blocked CDN leaves a visible page rather than a blank one. ## 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.** Netlify, Vercel, Cloudflare Pages, S3, or plain shared hosting all work. `index.html` is the home page. **2. Delete this README once you are done reading.** It is notes rather than a site file, as is `assets/img-manifest.json`. Keep `LICENSE.txt`. **3. Replace the copy.** Everything is fictional: the agency, the addresses, the prices, the people and the phone numbers. **4. Replace the photography.** See [Photography](#photography) below. **5. Change the three colours** in `assets/style.css` if you want a different identity: ```css :root { --petrol: #14343A; /* the ground */ --chalk: #EDE9E2; /* all type */ --sand: #D8B78A; /* the only accent */ } ``` Everything else on the page is derived from those three. There is no fourth hue anywhere. --- ### Accessibility - **No JavaScript**: every page reads as a complete document. Reveal targets are only hidden after `script.js` confirms GSAP is present, so a blocked CDN leaves a visible page rather than a blank one. The filter bar carries `hidden` in the markup and is only revealed by the script, so it never appears without the code that runs it. The mobile menu is gated on `.has-js`, so a no-JS phone keeps the plain row of nav links instead of a dead toggle. - **Reduced motion**: honoured in both the CSS media query and a `gsap.matchMedia` branch. The page transition never runs, the floorplans render fully drawn, the gallery swaps instantly, the mobile menu opens and closes instantly, and nothing is hidden. - **Keyboard**: every interactive element is a real `