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 3/5 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
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:
motioncomponents for animatable elementsuseSpringfor physics-based animationsuseVelocityto track the speed of changes of a motion value (in this casex)useTransformto derive values from other motion values, in this case linking the velocity ofxto the intensity of the blur effectlayoutIdfor shared element transitions
