Smooth Tabs

Introduction

The Tabs example shows a segmented control UI - a row of tab buttons with a sliding pill indicator that animates between them, and a content panel below that transitions directionally when the active tab changes.

It uses three APIs from Motion:

• motion to animate the sliding indicator and content panel
• AnimatePresence to handle entering and exiting content as tabs change
• variants to define directional enter and exit states for the content

How the sliding indicator works

The indicator is a motion.div that sits behind each tab button as an absolute-positioned background. When the active tab changes, the old indicator unmounts and a new one mounts inside the newly active button.

The key is layoutId. When two motion elements share the same layoutId, Motion treats them as the same element across renders. So when the indicator disappears from one button and appears in another, Motion animates it seamlessly between the two positions - giving us the sliding pill effect without any manual position tracking.