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.
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.
Read the full template overview
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
Structure
One script runs on all four pages with a single setup and teardown path and one motion branch 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.
Leaving the listing
The transition works in two halves. On departure, a click handler records the clicked photograph's exact position and its src into sessionStorage, paints a fixed clone over it 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 position is still true at the moment of navigation.
Landing on the property
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.
Filters and fallbacks
The same Flip plugin animates the register filter's reflow. The floorplan draws itself without 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.
Questions about this template
Is this actually four separate pages?
Yes: home, register, property detail and practice, sharing one nav, one stylesheet and one script. It is a real multi-page site with real navigation, not a one-pager with anchor links, which is what a property practice actually needs.
How does a photograph animate across a page load?
GSAP Flip plus sessionStorage. The listing photograph is measured as you leave the register, then reinstated into the property hero on the next page, so the image appears to travel across a genuine navigation. With JavaScript off, no Flip, reduced motion, or a modified click it is just a plain link, and it clears itself on back/forward-cache restores.
Do I have to use it for property?
No. The underlying shape is a filterable item grid leading to an item detail page, which fits architects with a project index, developers presenting units, or holiday-let portfolios just as well. The petrol grade and the valuation form are the parts that read specifically estate-agency.
Can visitors register or request a valuation?
The forms are designed and complete but unwired, because a static site has nowhere to post. Point them at your CRM, Formspree or a mail handler before launch. This matters more here than on most templates: a valuation enquiry that silently vanishes is a lost instruction.
Nineteen photographs is a lot of weight. Is it optimised?
They are bundled as WebP baked to a cool petrol grade, around 1.7MB for the whole set, with per-image brightness correction so mixed sources match rather than looking like a stock collage. Swapping in your own means matching that grade, not just dropping files in.
