Smooth Selection

What is 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 .

Hover-driven list with smooth selection.