---
title: "Smooth Selection — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Aidan Looker · Interactive. What is Smooth Selection?"
canonical: "https://framer.elliotli.dev/component/smooth-selection"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Smooth Selection

# Smooth Selection

Hover-driven list with smooth selection.

[View on Framer](https://framer.com/marketplace/components/smooth-selection/?via=elliot-li)

![Smooth Selection preview image 1](https://framer.elliotli.dev/og/component/smooth-selection/ea24820c43a324a8/1600x1200.jpg)

## Summary

What is Smooth Selection?

## Description

## 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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## 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**](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #10574

## Details

- **Author**: Aidan Looker
- **Price**: $9.00
- **Published**: 2026-05-12
- **Updated**: 2026-06-13
- **Added**: 2026-05-01
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step