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