Skip to example

DocsDocs ExamplesExamples AI KitAIAI KitAI

Examples/Navigation

Smooth tabs

A set of tabs that trigger a smooth transition between different views.

BKMN21 Mar 2025

Vue

On this page

Live example

Live example

Built withmotionuseSpringuseTransformuseVelocityuseMotionValuewhileFocuslayoutId

Motion+One payment
Lifetime updates

Motion+ examples

Smooth tabs is part of Motion+

Run every demo live, tweak the controls and copy the source. Motion+ also gives your agent the examples through Motion's MCP, with lifetime access to new examples and APIs.

Examples: 520+
Source: Included
Updates: Lifetime

Get Motion+Get Motion+Sign in

Not ready? Try 10 Motion+ demos free.

Create a free Motion account to run 10 Motion+ demos live, with their controls. No card needed.

Have an account? Log in

EmailPassword

I agree to the Terms and Privacy policy, and to receive emails from Motion about new examples and releases.

Related examples

Command Palette
Context Menu
Floating Action Button

Latest in Vue

AnimateView: App Store
AnimateView: Clip path
AnimateView: Reorder
AnimateView: Skeleton

Sponsors

Motion is supported by
the best in the industry

Discuss a partnership

Partners

Platinum

Newsletter

Subscribe to the newsletter

>

Site

About
Changelog
Docs
Examples
Magazine
Made with Motion
Partners
Troubleshooting

Products

AI Kit
CSS Studio
Motion
Motion+
Motion StudioNew
The Book of Motion

Most Popular

React animation
Layout animation
SVG animation
Motion component
GSAP vs Motion

Docs

JavaScript
React
Vue
AI Kit

Social

GitHub
RSS: Changelog
RSS: Magazine
X/Twitter
YouTube

© 2026 Motion

+Login Purchase