Smooth Selection

What is Smooth Selection?

Smooth Selection is a split-layout component that pairs an interactive item list with a full-height image panel. When users hover over a row, a dark selection bar slides smoothly to that item while the corresponding image crossfades into view with a cinematic Ken Burns zoom effect. Text animates in with a staggered reveal, and metric values count up from zero. Every element is fully editable from the property panel — titles, tags, subtitles, metrics, images, and links are all controlled per item.

Core Features

• Sliding selection bar that smoothly tracks the hovered row with configurable animation speed

• Synchronized image crossfade with subtle Ken Burns zoom for a cinematic feel

• Staggered text reveal animation on the active row title and subtitle

• Animated metric counter that counts up from zero on selection change

• Four curated theme presets (Parchment, Midnight, Monochrome, Warm Stone) plus full custom color control

• Accent bar indicator on the active row's left edge for a premium visual cue

• Optional row index numbers, row dividers, and image gradient overlay

• Per-item link support with an animated arrow icon on the active row

Controls inside Framer

Items

• Title — main heading for each row

• Tag — optional label shown in parentheses

• Subtitle — secondary line of text

• Metric — large number or text displayed on the right

• Metric Label — unit or descriptor after the metric

• Image — responsive image with alt text

• Link — optional URL, reveals an arrow icon when set

Theme and Layout

• Theme — Parchment, Midnight, Monochrome, Warm Stone, or Custom

• Row Dividers — toggle thin separator lines between rows

• Row Numbers — display 01, 02... index labels

• Accent Bar — colored bar on the left edge of the active row

• Animate Metrics — count-up animation on metric values

• Image Gradient — gradient fade at the bottom of the image panel

• Animation Speed — Fast, Medium, or Slow

Image Panel

• Image Fit — Cover or Contain

• Image Width — adjustable from 25% to 60%

Styling

• Border Radius — 0 to 32px

• Colors — 8 color controls (visible when Theme is set to Custom): Background, Selection, Text, Text Secondary, Selected Text, Selected Secondary, Dividers, Accent

• Typography — independent size controls for Title, Metric, and Subtitle

• Font — native font picker

Best use cases

• Real estate and property listing showcases

• Agency portfolio and case study selectors

• Product or service category browsers

• Team member or leadership directory displays

Drop it onto your canvas, swap in your content, and ship a selection experience that feels custom-built.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.