Customizing Temels

All motion in Temels is a native Webflow Interaction, authored in the Designer's Interactions panel: the section scroll reveals, staggered lists, load reveals, navbar states, link hovers, and the menu. The Homesites page adds the cursor-linked list drift, the hover background reveal, and the per-homesite modals, all built the same way. There is no custom code anywhere in this template, no third-party script, and no Lottie file to maintain. Everything can be edited without leaving the Designer, and this guide walks through each piece.

Editing the animations

Every motion in the template is a native Webflow Interaction. Select the element that animates, open the Interactions panel, and you will see its trigger and timeline. From there you can retune the duration, easing, delay, or trigger, or delete the interaction entirely. Because each element's resting state is its normal, visible state, removing an interaction never hides content: the element simply stops animating and stays in place. The reference below lists each interaction and the element or class it drives.

Scroll reveals and staggers

Sections fade and rise into place as they scroll into view, and repeated rows, such as the homesites list and the stat blocks, cascade their items in sequence. Both are Scroll into view interactions set on the section or the parent list, with a small per-item delay creating the stagger. To retune one, select the animated element, open the Interactions panel, and adjust the timeline's move distance, opacity, duration, or delay. To turn an effect off, delete its interaction; the element keeps its final, visible state.

Homesite imagery

Each homesite supplies one image from the CMS, and it is used in three places: the row thumbnail, the full-bleed background that fades in behind the list on hover, and the modal. Swap the image on the CMS item and all three follow. The row is homesite_link and the background layer behind the list is homesites_bg_layer, whose images are matched to each row by a data-bg attribute carrying the homesite slug. There is nothing to maintain in code.

Animation reference

Every animation is a native Webflow Interaction. Here is what each one drives and the element or class it targets:

Load reveal A Page load interaction that fades and rises the above-the-fold hero content.

Section reveal A Scroll into view interaction that fades and rises a section as it enters the viewport.

Card stagger A Scroll into view interaction that cascades a list's items in sequence, such as the homesites rows and the stat blocks.

nav_bar Navbar background fades to solid on scroll.

nav_mobile Mobile menu fades and slides open and closed.

To customize an animation, select its element and open the Interactions panel, then adjust the timeline duration, easing, delay, or trigger. Reveal timings sit around 0.5 to 0.6s with an ease-out.

To retarget or remove one, reselect the element in the Interactions panel, change its trigger or target, or delete the interaction. A removed element still shows, because its resting state is already visible.

Colors, type, and spacing

The whole design system runs on Webflow Variables. Open the Variables panel to change brand colors, type sizes, and spacing, and every page updates at once. The Style Guide shows each token, heading, button, and form style in one place.

Images and fonts

Swap any image by selecting it and choosing a new asset; the layout and hover states carry over, so always give the replacement descriptive alt text. Type runs on two families set as font-family variables: Newsreader, a serif, for the display headings, and Space Mono for body copy, labels, and the uppercase eyebrows. Change either one in the Variables panel, or restyle the body and heading classes in the Style Guide, and the whole site follows.

CMS collections

Homesites is the CMS collection that drives this template. The homesites list, its hover backgrounds and every modal all read from it, so adding a homesite in the CMS adds a row and its modal with no page work at all. Each item carries its name, description, price, lot number, acreage, status and image.