Tab select: Step-by-step tutorial
Matt Perry
In this tutorial, we're going to build the Tab select 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 Tab select 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
The Tab Select example shows a common UI pattern: a set of tabs where the selected indicator smoothly animates from the old tab to the new one.
In this example, the selected indicator looks like one element but it's actually several elements, all animating between each other as if there were just one.
This shared element "magic move" effect can be complex to build manually, but Motion makes it simple. In this tutorial, we'll learn to use:
The
layoutIdprop to create a shared layout animation.Gesture props like
whileTapandwhileFocusto add satisfying micro-interactions.
