Elliott Richmond Tabs Animation
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 require
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.
A closer look.
- 01Upload the plugin to /wp-content/plugins/elliott-richmond-tabs-animation .
- 02Activate through the ‘Plugins’ screen in WordPress.
- 03Visit Settings → Tabs Animation to choose an effect, duration, and easing.
Frequently asked questions.
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.
