Real Estate Template 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.
About This Template
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.
What's Included
- 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
Perfect For
- 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.