Back to Dictionary
Page & View Transitions
●○○Ready to Use

Active Pill Slide

Use Active Pill Slide when the selected container itself should move; use Tab Underline Slide when only navigation emphasis should move.

Timing

160-240ms is usually enough; slower movement makes simple selection feel heavy.

Easing

Use a soft spring or a fast ease-out curve so the pill lands crisply without bouncing too much.

Risk

overdesignedaccessibility sensitive

Live Demo

Selected mode

Overview

The moving pill shows continuity while the content below updates.

What It Is

A rounded active background that glides from one segmented option or filter chip to another, making the selected state feel continuous instead of abruptly changing.

Decision Guidance

Use Active Pill Slide when the selected container itself should move; use Tab Underline Slide when only navigation emphasis should move.

Best For

Showing which option is currently selected in a compact control while preserving spatial continuity.

Avoid When

Avoid it for normal links, long side navigation, or multi-select controls where a moving single indicator would misrepresent state.

Timing

160-240ms is usually enough; slower movement makes simple selection feel heavy.

Easing

Use a soft spring or a fast ease-out curve so the pill lands crisply without bouncing too much.

Risk Tags

overdesignedaccessibility sensitive

Alternatives

Fade TransitionToggle Switch AnimationTab Underline Slide

✓When to Use

  • Segmented controls such as Overview / Compare / Build
  • Filter chips where only one option is active
  • Mode switchers that update nearby content

✕When NOT to Use

  • Large navigation menus with long labels or wrapping text
  • Multi-select filters where several chips can be active at once
  • Cases where the content change is more important than the selected control

Configuration Tips

  • 01Use a shared layout element for the active background so it travels between buttons
  • 02Keep the motion short, usually 160-240ms, so selection feels immediate
  • 03Pair it with a subtle fade transition in the content region

You've Seen It In

LinearVercelApple Settings

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Create a segmented control with three options. When I click an option, animate a rounded active background so it slides under the selected label, then fade the content below to match the new selection.

Code Example (Tailwind CSS)

import { LayoutGroup, motion } from 'framer-motion';

export function ActivePillSlide() {
  const [active, setActive] = useState('Overview');
  const options = ['Overview', 'Compare', 'Build'];

  return (
    <LayoutGroup>
      <div className="flex rounded-full bg-stone-100 p-1">
        {options.map((option) => (
          <button
            key={option}
            onClick={() => setActive(option)}
            className="relative rounded-full px-4 py-2 text-sm"
          >
            {active === option && (
              <motion.span
                layoutId="active-pill"
                className="absolute inset-0 rounded-full bg-stone-950"
              />
            )}
            <span className="relative z-10">{option}</span>
          </button>
        ))}
      </div>
    </LayoutGroup>
  );
}

Related Effects

Fade Transition

A smooth opacity transition between two states, pages, or components to prevent jarring instant visual changes.

Scale on Press

A simpler, non-spring version of tactile feedback where an element scales down slightly and instantly when pressed.

Tab Underline Slide

A highlighting background or underline that smoothly glides from the currently selected tab to the newly clicked tab, reinforcing spatial relationship.