Описание
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.
Скриншоты
Установка
- 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.
Часто задаваемые вопросы
-
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
requestsprefers-reduced-motion: reduce; panels appear instantly instead.
Отзывы
Участники и разработчики
«Elliott Richmond Tabs Animation» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
Участники
Перевести «Elliott Richmond Tabs Animation» на ваш язык.
Заинтересованы в разработке?
Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.
Журнал изменений
0.1.0
- Initial release.
0.2.0
- Updated assets.
- Included screenshot.