Smooth tabs: Step-by-step tutorial

Matt Perry

In this tutorial, we're going to build the Smooth tabs example step-by-step.

This example is rated advanced difficulty, which means we assume you're already quite familiar with Motion (and JavaScript in general).

Here's a live demo of the example we're going to be creating:

Checking Motion+ status…

The Smooth tabs tutorial

is exclusive to Motion+

290+ examples & 35+ tutorials

Premium APIs

Visual editor for VS Code

alpha

Discord community

Early access

Lifetime updates

Get Motion+ for instant access

One-time payment, lifetime updates

Already joined?

Introduction

In this tutorial, we'll learn how to create a beautifully smooth tab interface where switching between tabs triggers fluid animations of both the selected tab indicator and the content views.

The selected tab indicator will animate with shared element transitions, and the content view will animate with spring animations, using motion values to link velocity to the intensity of the blur effect.

The Smooth Tabs example leverages several Motion APIs to create natural, physics-based animations:

motion components for animatable elements
useSpring for physics-based animations
useVelocity to track the speed of changes of a motion value (in this case x)
useTransform to derive values from other motion values, in this case linking the velocity of x to the intensity of the blur effect
layoutId for shared element transitions