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.

Reviews

James Monroe 24 Ogos 2026

Things that made this perfect: Hidden in settings menu, no annoying admin bar entry! Thanks! Simple handful of settings and can easily see it being added to (by dev or anyone who customizes) It just works!

Read all 1 review