Login
Download

How to Animate Tabs

The Tab Animation Settings control how content panels transition when users switch tabs. With smooth, customizable animations, you can enhance the user experience and draw attention to your tabbed content.

Accessing the Settings

  1. Select your Tabs block in the Gutenberg editor.
  2. In the block sidebar, expand the Animation panel.
The Animation panel in the block sidebar.
The Animation panel in the block sidebar.

Animation Settings Controls – placeholder image

Animation Type

Choose from seven built-in transition effects:

  • Fade: Smoothly fade panels in and out.
  • Slide Up: Panels slide upward.
  • Slide Down: Panels slide downward.
  • Slide Left: Panels slide to the left.
  • Slide Right: Panels slide to the right.
  • Zoom In: Panels scale in (zoom closer).
  • Zoom Out: Panels scale out (zoom away).

Tip: Use subtle fades or slides for content-heavy tabs; zoom effects work well for image-focused layouts.