Custom Animations for Bricks
| 开发者 | pippn |
|---|---|
| 更新时间 | 2026年1月8日 14:26 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 6.9 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
Custom Animations for Bricks is a lightweight plugin that lets you easily add custom CSS animations to your Bricks Builder sites. Through a simple admin interface, you can define animation keys, labels, and full CSS code (including @keyframes and .brx-animate- classes). These animations then appear in the Bricks Interactions panel's "Start animation" dropdown, allowing seamless integration with triggers like viewport entry or mouse hover.
Key Features:
- User-friendly form to add/edit/delete animations with validation for Bricks compatibility.
- Live search and sort in the animations table for quick management.
- Preview modal with dark/light mode toggle to test animations right in the admin (replays on mode switch).
- Enqueues CSS only on frontend (skips Bricks editor for performance).
- Stores animations securely in WordPress options—no database tables needed. This plugin requires the Bricks theme to be active and has been tested with Bricks Builder version 2.0.2.
安装:
- Download the plugin ZIP from the WordPress repository.
- In your WordPress admin, go to Plugins > Add New > Upload Plugin and select the ZIP.
- Activate the plugin.
- Ensure the Bricks theme is installed and active (tested with version 2.0.2).
- Navigate to Bricks > Custom Animations in the admin menu to start adding animations.
屏幕截图:
常见问题:
Does this plugin require Bricks Builder?
Yes, it integrates directly with Bricks' animation system and requires the Bricks theme to be active. It has been tested with Bricks Builder version 2.0.2.
How do I add a custom animation?
- Go to Bricks > Custom Animations.
- Fill in the key (slug, e.g., "my-glow"), label (display name), and CSS (full block with .brx-animate-{key} and @keyframes).
- Click Add Animation.
- In the Bricks editor, select an element > Interactions > Start animation > Choose your new option.
Why isn't my animation showing in the preview?
Ensure your CSS includes an animation-duration (e.g., 2s) for the preview fallback—Bricks overrides this in the editor. Test with the modal's dark/light toggle for contrast.
Is it performant?
Yes—minimal overhead (<50ms load, 1-2 queries). CSS enqueues only on frontend; no global assets.
Can I export/import animations?
Not yet—future updates may add this. For now, back up via Tools > Export > All content (options included).
更新日志:
1.1.15
- Class name updated from CustomAnimationsBricks to CUSTANIMFORBX_CustomAnimationsBricks.
- Prefix Update, CSS Enqueue, Inline CSS in Preview
- Only loads animation CSS on pages where animations are used, boosting performance.
- Fixed code standard issues for better compatibility and security.
- Improved animation detection for Bricks Builder pages and templates.
- Added secure debugging for developers (requires WP_DEBUG).
- Added ABSPATH guard to prevent direct access.
- Define plugin constants to reference paths/URLs safely.
- Fixed minor JS issue in preview modal for smoother animation replay.
- Improved nonce validation for edit/delete actions.
- Aggressively hide checkbox in toggle for full invisibility.
- Simplified plugin name to "Custom Animations for Bricks".
- Ensured icon colors swap reliably on mode change.
- Fixed icon alignment in toggle (sun left, moon right, no overlap).
- Dynamic color transitions for icons (yellow active, gray inactive).
- Added icons to toggle with fade effects.
- Prevented modal close on toggle click.
- Replay animation on dark/light toggle.
- Modern CSS toggle switch (no icons initially).
- Toggle switches modal body background only (demo box stays light).
- Fixed toggle closing modal.
- Added dark/light mode toggle to preview modal (starts light).
- Darker demo background in preview for better glow contrast.
- Added Preview button with modal demo and CSS injection.
- Fixed search hiding form elements.
- Live dynamic search with count updates and clear button.
- Overhauled search to client-side filtering.
- Fixed form key field naming bug.
- Added edit functionality, search/sort, and CSS validation.
- Menu under Bricks with unique slug.
- Nested under Bricks > Settings.
- Standalone menu to avoid redirects.
- Admin menu priority fix.
- Fixed Bricks theme check and CSS output.
- Initial release.