Six motion grammars
Slide, fill, underline, fade, stack, or add an elastic selection response.
Navigation & state
Animated Tabs
Move between related views without losing context. Shape the selection marker, panel entrance, timing, and palette while preserving native tab semantics.
01Overview
A concise view of motion, hierarchy, and current state.
Selection with continuity
A tab transition should clarify where content went.
Every preset keeps the tablist, selected state, panel relationship, and keyboard model intact.
Keyboard complete
Arrow keys, Home, and End update both focus and selected state.
Scoped export
Multiple tab systems can coexist without duplicated IDs or global selectors.
Three-step workflow
How to use the Animated Tabs studio
- Choose the selection language
Match a quiet underline or stronger pill to the surrounding interface.
- Tune the pace
Keep navigation fast enough that repeated switching remains effortless.
- Test the sequence
Click, tab, use every arrow key, and verify reduced motion before export.
Questions, answered.
Do the panels use ARIA relationships?
Yes. Exported tabs receive unique IDs and point to their associated panel.
Can several instances share a page?
Yes. The runtime scopes state and cleanup to each component root.
What happens with reduced motion?
State remains immediate while decorative movement is removed.