GSAP 3
No custom code
Instructions
Everything you need to make VillaNest your own: brand colours and fonts, CMS content, forms and every GSAP animation, with clear steps to edit or remove each one.
01
GSAP animations
All animations are built with Webflow Interactions powered by GSAP. No custom code is used, and every animation respects the visitor's reduced motion setting.
To edit an animation, open the Interactions panel in the Designer, select it by the name shown below, then change its duration, easing, delay or properties in the timeline.
Remove an animation in 5 steps
1
Open the Interactions panel in the Webflow Designer.
2
Find the interaction by its name in the element map below.
3
Open its menu and choose Delete.
4
Preview the page. The elements now show in their final state.
5
Publish the site to make the change live.
02
Animation element map
Every interaction in VillaNest, the element that triggers it and how to remove it.
Home
Hero Door Intro
Trigger element: Page load (no element)
Opens the hero doors and brings in Hero Door Wrap, Door Panels, Hero Title and Hero Subtitle when the page loads.
To remove: delete the interaction. The hero then shows in its final, open state.
Home
Home Doors Open On Scroll
Trigger element: Door Track (scroll scrub)
Slides the Door Panels apart as the visitor scrolls through the hero.
To remove: delete the interaction, then set Door Panels to the open position in the Style panel if you want the doors to start open.
Home
Management Cards — pinned horizontal focus scroll
Trigger element: Service Scroll (scroll scrub)
Pins the Management section and moves the service cards horizontally while the visitor scrolls.
To remove: delete the interaction. The cards then sit in a normal row and can be scrolled sideways.
Home
Explore Map Scroll — active location
Trigger element: Map Scroll (scroll scrub)
Highlights each Map Pin and its Map Card Spot one after another as the visitor scrolls.
To remove: delete the interaction. All pins and location cards stay visible.
Home
Agents — scroll-linked card slider
Trigger element: Agents collection list (scroll scrub)
Moves the Agent Slide cards sideways in step with page scroll.
To remove: delete the interaction. The agent cards show as a static row.
Home
Testimonials Side Columns Auto Scroll and Spotlight Card Cycle
Trigger element: Page load (no element)
Loops the two side review columns and cycles the spotlight review card.
To remove: delete both interactions. Reviews stay in place.
Home
Why Choose Us Card Stack
Trigger element: Why Choose Us section (scroll scrub)
Stacks the reason cards on top of each other while scrolling.
To remove: delete the interaction. Cards show in a normal column.
About
About Leaders Pinned Carousel
Trigger element: Leadership section (pinned scroll scrub)
Pins the leadership section and slides through each leader card.
To remove: delete this interaction and About Leader Active Start. Leader cards show as a row.
About
About Value 1 to 4 Hover
Trigger element: Each Value Card (hover)
Expands the hovered value card, zooms its image and reveals its details.
To remove: delete the four interactions, then add the Is Active combo to the card you want open.
Services
Service Panel Slide In and Service Stack
Trigger element: Each service panel (scroll scrub)
Slides service panels in from the left and right, then stacks them as you scroll.
To remove: delete the Service Panel and Service Stack interactions. Panels show one under another.
Book a Viewing · Free Valuation
Booking Timeline Fill and Valuation Track Fill
Trigger element: Timeline / How it works track (scroll scrub)
Fills the orange progress line step by step as the visitor scrolls.
To remove: delete the interaction and set Timeline Fill height to 100% if you want the line full.
All pages
Hero Intro and Reveal animations
Trigger element: Page load and each section (scroll)
Each page has a “Hero Intro” on load and “… Reveal” interactions that fade and lift content into view.
To remove: delete any of them. Content then appears instantly with no other changes needed.
All pages
CTA Band Reveal and Footer Reveal
Trigger element: CTA Band and Footer components (scroll)
Fades and lifts the CTA and footer content into view.
To remove: open the component, then delete the interaction in its Interactions panel.
Navbar · All pages
Mega Menu Hover
Trigger element: Pages dropdown in the Navbar (hover)
Opens and closes the Pages mega menu.
To remove: delete the interaction and set the menu to show on click in the Navbar component instead.
03
Colours and fonts
Every colour, font size, spacing and radius in VillaNest is a Webflow Variable. Open the Variables panel in the Designer and edit Signal Orange, Ember, Charcoal, Slate, Paper, Stone and White, and every page updates at once.
Headings use Fraunces and body text uses Manrope, both from Google Fonts. To change a font, add it in Site settings > Fonts, then update the font family variables.
04
CMS collections
VillaNest uses three CMS collections. Properties holds each listing with its price, status, type, location, rooms, area, gallery and listing agent. Agents holds each agent's photo, role, specialties and contact details. Blog Posts holds each guide with its author, topic and reading time.
Add or edit items in the CMS panel. Each property links to its agent through a Reference field, so the agent card and contact details update automatically on every listing page.
05
Forms
The Contact, Free Valuation, Book a Viewing, property viewing, agent contact and newsletter forms are native Webflow forms. Set where submissions are sent in Site settings > Forms.
To edit the success or error message, select the form, open the Settings panel and switch the state to Success or Error, then edit the text on the canvas.
06
Need help?
If you have any questions about editing VillaNest, email us at contact.lioweb@gmail.com and we will get back to you within 24 to 48 hours.
Ready when you are
Your next home starts with one call
Tell us what you are looking for and a local VillaNest agent will line up private viewings, honest pricing advice and a clear plan within one business day.