Elliott Richmond Tabs Animation

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.

Screenshots

Installation

Upload the plugin to /wp-content/plugins/elliott-richmond-tabs-animation.
Activate through the ‘Plugins’ screen in WordPress.
Visit Settings Tabs Animation to choose an effect, duration, and easing.

FAQ

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.