FAIR

Federated and Independent Repositories

Elliott Richmond Tabs Animation

Plugin Banner

Elliott Richmond Tabs Animation

by Elliott Richmond

Download
Description

The core Tabs block (WordPress 7.1+) shows and hides its core/tab-panel
content by toggling the hidden attribute via the Interactivity API, which
reveals it abruptly. This plugin adds a small animation to that reveal and a
Settings Tabs Animation screen to control it, with no theme changes
required.

Features:

  • Five animation types: Fade, Slide right, Slide left, Slide up, Slide down.
  • Adjustable duration (0–3000ms) and easing (ease, ease-in, ease-out,
    ease-in-out, linear).
  • Respects the visitor’s reduced-motion preference.
  • A single small inline stylesheet — no build step, no JavaScript.
  1. Upload the plugin to /wp-content/plugins/elliott-richmond-tabs-animation.
  2. Activate through the ‘Plugins’ screen in WordPress.
  3. Visit Settings Tabs Animation to choose an effect, duration, and easing.
  1. Demo of animation

    Demo of animation

Does this work with any theme?

Yes. The animation targets the core Tabs block’s own markup
(.wp-block-tab-panel), not anything theme-specific, so it works with any
block theme or classic theme that supports the core Tabs block.

Can different Tabs blocks on the same site use different animations?

Not currently — one setting applies site-wide to every Tabs block.

Does it affect page load performance?

No extra HTTP request: the animation CSS is added as a small inline
stylesheet, and there’s no JavaScript.

What if a visitor has reduced motion enabled?

The animation is disabled automatically for visitors whose OS/browser
requests prefers-reduced-motion: reduce; panels appear instantly instead.

0.1.0

  • Initial release.

0.2.0

  • Updated assets.
  • Included screenshot.
Back to top