Design Openbook

Tab Bar Interactions

What animation effects work well for a mobile tab bar? A sliding indicator with an outline-to-filled icon change, about 200ms, is the sound default; flashy effects like 3D flips or particles suit only playful apps.

It is the place tapped most each day, so effects should be short and clear. Showing where you landed matters more than flair.

Terms and previews

Tap a preview to pause it; tap again to play.

  1. Sliding indicator

    An underline or pill-shaped selection mark glides to the tapped tab

  2. Outline-to-filled icon

    A line icon changes into a filled icon

  3. Expanding label

    Only the selected tab expands its text sideways

  4. Icon bounce

    The tapped icon hops slightly and settles

  5. 3D flip / Particles

    The icon flips or particles scatter. Strongly decorative

How to use it

  • The default is a sliding indicator plus an outline-to-filled icon change. Around 200ms is enough.
  • Use heavy decoration such as flips and particles only when fun is the goal, as in games or kids apps.
  • Tapping the already selected tab again should scroll the list to the top. Users already know this behavior.

Prompts to copy

4-tab bar

Add interactions to a bottom tab bar with 4 tabs.
- The selection mark is a pill-shaped background that glides to the tapped tab: a Sliding indicator, 220ms spring.
- The selected tab's icon switches from line to filled (Outline-to-filled).
- Tapping an already selected tab scrolls the list to the top.
- Use only transform and opacity.

Source posts: @ui_motion_prompts, @ui_motion_prompts, @ui_motion_prompts

All cards (27)