{"id":256008,"date":"2026-01-08T05:36:59","date_gmt":"2026-01-08T05:36:59","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/custom-animations-for-bricks\/"},"modified":"2026-01-08T05:36:33","modified_gmt":"2026-01-08T05:36:33","slug":"custom-animations-for-bricks","status":"publish","type":"plugin","link":"https:\/\/pcd.wordpress.org\/plugins\/custom-animations-for-bricks\/","author":14708204,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.1.15","stable_tag":"1.1.15","tested":"6.9.4","requires":"5.0","requires_php":"7.4","requires_plugins":null,"header_name":"Custom Animations for Bricks","header_author":"Joshua Pippin","header_description":"Allows adding custom animations to Bricks interface. Adds animation names to the dropdown and outputs the CSS.","assets_banners_color":"0f2330","last_updated":"2026-01-08 05:36:33","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/joshuapippin.com\/custom-animations-for-bricks\/","header_author_uri":"https:\/\/joshuapippin.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":127,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.1.15":{"tag":"1.1.15","author":"Pippn","date":"2026-01-08 05:36:33"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.gif":{"filename":"icon-128x128.gif","revision":3434865,"resolution":"128x128","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3434865,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3434887,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.1.15"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3434865,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3434865,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3434865,"resolution":"3","location":"assets","locale":""},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3434865,"resolution":"4","location":"assets","locale":""}},"screenshots":{"1":"The admin form for adding or editing custom animations, with validation and descriptions.","2":"The existing animations table with live search, sort, and actions (Edit, Delete, Preview).","3":"The preview modal showing the animation in action, with dark\/light mode toggle for testing contrast.","4":"The Bricks editor Interactions panel, showing a custom animation (e.g., Subtle Glow) selected as the Action after choosing a trigger."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[785,198723,356,253559],"plugin_category":[50,59],"plugin_contributors":[253560],"plugin_business_model":[],"class_list":["post-256008","plugin","type-plugin","status-publish","hentry","plugin_tags-animation","plugin_tags-bricks","plugin_tags-css","plugin_tags-custom-animation","plugin_category-media","plugin_category-utilities-and-tools","plugin_contributors-pippn","plugin_committers-pippn"],"banners":{"banner":"https:\/\/ps.w.org\/custom-animations-for-bricks\/assets\/banner-772x250.png?rev=3434887","banner_2x":"https:\/\/ps.w.org\/custom-animations-for-bricks\/assets\/banner-1544x500.png?rev=3434865","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/custom-animations-for-bricks\/assets\/icon-128x128.gif?rev=3434865","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/custom-animations-for-bricks\/assets\/screenshot-1.png?rev=3434865","caption":"The admin form for adding or editing custom animations, with validation and descriptions."},{"src":"https:\/\/ps.w.org\/custom-animations-for-bricks\/assets\/screenshot-2.png?rev=3434865","caption":"The existing animations table with live search, sort, and actions (Edit, Delete, Preview)."},{"src":"https:\/\/ps.w.org\/custom-animations-for-bricks\/assets\/screenshot-3.png?rev=3434865","caption":"The preview modal showing the animation in action, with dark\/light mode toggle for testing contrast."},{"src":"https:\/\/ps.w.org\/custom-animations-for-bricks\/assets\/screenshot-4.png?rev=3434865","caption":"The Bricks editor Interactions panel, showing a custom animation (e.g., Subtle Glow) selected as the Action after choosing a trigger."}],"raw_content":"\n

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.<\/p>\n\n

Key Features:\n* User-friendly form to add\/edit\/delete animations with validation for Bricks compatibility.\n* Live search and sort in the animations table for quick management.\n* Preview modal with dark\/light mode toggle to test animations right in the admin (replays on mode switch).\n* Enqueues CSS only on frontend (skips Bricks editor for performance).\n* Stores animations securely in WordPress options\u2014no database tables needed.<\/p>\n\n

This plugin requires the Bricks theme to be active and has been tested with Bricks Builder version 2.0.2.<\/p>\n\n\n

    \n
  1. Download the plugin ZIP from the WordPress repository.<\/li>\n
  2. In your WordPress admin, go to Plugins > Add New > Upload Plugin<\/strong> and select the ZIP.<\/li>\n
  3. Activate the plugin.<\/li>\n
  4. Ensure the Bricks theme is installed and active (tested with version 2.0.2).<\/li>\n
  5. Navigate to Bricks > Custom Animations<\/strong> in the admin menu to start adding animations.<\/li>\n<\/ol>\n\n\n
    \n

    Does this plugin require Bricks Builder?<\/h3><\/dt>\n

    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.<\/p><\/dd>\n

    How do I add a custom animation?<\/h3><\/dt>\n
      \n
    1. Go to Bricks > Custom Animations<\/strong>.<\/li>\n
    2. Fill in the key (slug, e.g., \"my-glow\"), label (display name), and CSS (full block with .brx-animate-{key} and @keyframes).<\/li>\n
    3. Click Add Animation<\/strong>.<\/li>\n
    4. In the Bricks editor, select an element > Interactions > Start animation > Choose your new option.<\/li>\n<\/ol><\/dd>\n

      Why isn't my animation showing in the preview?<\/h3><\/dt>\n

      Ensure your CSS includes an animation-duration<\/code> (e.g., 2s) for the preview fallback\u2014Bricks overrides this in the editor. Test with the modal's dark\/light toggle for contrast.<\/p><\/dd>\n

      Is it performant?<\/h3><\/dt>\n

      Yes\u2014minimal overhead (<50ms load, 1-2 queries). CSS enqueues only on frontend; no global assets.<\/p><\/dd>\n

      Can I export\/import animations?<\/h3><\/dt>\n

      Not yet\u2014future updates may add this. For now, back up via Tools > Export > All content<\/strong> (options included).<\/p><\/dd>\n\n<\/dl>\n\n\n

      1.1.15<\/h4>\n\n
        \n
      • Class name updated from CustomAnimationsBricks to CUSTANIMFORBX_CustomAnimationsBricks.<\/li>\n<\/ul>\n\n

        1.1.14<\/h4>\n\n
          \n
        • Prefix Update, CSS Enqueue, Inline CSS in Preview<\/li>\n<\/ul>\n\n

          1.1.13<\/h4>\n\n
            \n
          • Only loads animation CSS on pages where animations are used, boosting performance.<\/li>\n
          • Fixed code standard issues for better compatibility and security.<\/li>\n
          • Improved animation detection for Bricks Builder pages and templates.<\/li>\n
          • Added secure debugging for developers (requires WP_DEBUG).<\/li>\n<\/ul>\n\n

            1.1.12<\/h4>\n\n
              \n
            • Added ABSPATH guard to prevent direct access.<\/li>\n
            • Define plugin constants to reference paths\/URLs safely.<\/li>\n<\/ul>\n\n

              1.1.11<\/h4>\n\n
                \n
              • Fixed minor JS issue in preview modal for smoother animation replay.<\/li>\n<\/ul>\n\n

                1.1.10<\/h4>\n\n
                  \n
                • Improved nonce validation for edit\/delete actions.<\/li>\n<\/ul>\n\n

                  1.1.9<\/h4>\n\n
                    \n
                  • Aggressively hide checkbox in toggle for full invisibility.<\/li>\n<\/ul>\n\n

                    1.1.8<\/h4>\n\n
                      \n
                    • Simplified plugin name to \"Custom Animations for Bricks\".<\/li>\n
                    • Ensured icon colors swap reliably on mode change.<\/li>\n<\/ul>\n\n

                      1.1.7<\/h4>\n\n
                        \n
                      • Fixed icon alignment in toggle (sun left, moon right, no overlap).<\/li>\n
                      • Dynamic color transitions for icons (yellow active, gray inactive).<\/li>\n<\/ul>\n\n

                        1.1.6<\/h4>\n\n
                          \n
                        • Added icons to toggle with fade effects.<\/li>\n
                        • Prevented modal close on toggle click.<\/li>\n<\/ul>\n\n

                          1.1.5<\/h4>\n\n
                            \n
                          • Replay animation on dark\/light toggle.<\/li>\n
                          • Modern CSS toggle switch (no icons initially).<\/li>\n<\/ul>\n\n

                            1.1.4<\/h4>\n\n
                              \n
                            • Toggle switches modal body background only (demo box stays light).<\/li>\n
                            • Fixed toggle closing modal.<\/li>\n<\/ul>\n\n

                              1.1.3<\/h4>\n\n
                                \n
                              • Added dark\/light mode toggle to preview modal (starts light).<\/li>\n<\/ul>\n\n

                                1.1.2<\/h4>\n\n
                                  \n
                                • Darker demo background in preview for better glow contrast.<\/li>\n<\/ul>\n\n

                                  1.1.1<\/h4>\n\n
                                    \n
                                  • Added Preview button with modal demo and CSS injection.<\/li>\n<\/ul>\n\n

                                    1.1.0<\/h4>\n\n
                                      \n
                                    • Fixed search hiding form elements.<\/li>\n<\/ul>\n\n

                                      1.0.9<\/h4>\n\n
                                        \n
                                      • Live dynamic search with count updates and clear button.<\/li>\n<\/ul>\n\n

                                        1.0.8<\/h4>\n\n
                                          \n
                                        • Overhauled search to client-side filtering.<\/li>\n<\/ul>\n\n

                                          1.0.7<\/h4>\n\n
                                            \n
                                          • Fixed form key field naming bug.<\/li>\n<\/ul>\n\n

                                            1.0.6<\/h4>\n\n
                                              \n
                                            • Added edit functionality, search\/sort, and CSS validation.<\/li>\n<\/ul>\n\n

                                              1.0.5<\/h4>\n\n
                                                \n
                                              • Menu under Bricks with unique slug.<\/li>\n<\/ul>\n\n

                                                1.0.4<\/h4>\n\n
                                                  \n
                                                • Nested under Bricks > Settings.<\/li>\n<\/ul>\n\n

                                                  1.0.3<\/h4>\n\n
                                                    \n
                                                  • Standalone menu to avoid redirects.<\/li>\n<\/ul>\n\n

                                                    1.0.2<\/h4>\n\n
                                                      \n
                                                    • Admin menu priority fix.<\/li>\n<\/ul>\n\n

                                                      1.0.1<\/h4>\n\n
                                                        \n
                                                      • Fixed Bricks theme check and CSS output.<\/li>\n<\/ul>\n\n

                                                        1.0.0<\/h4>\n\n
                                                          \n
                                                        • Initial release.<\/li>\n<\/ul>","raw_excerpt":"Adds custom CSS animations to Bricks interactions via a simple admin UI with preview and search.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/256008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=256008"}],"author":[{"embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/pippn"}],"wp:attachment":[{"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=256008"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=256008"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=256008"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=256008"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=256008"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/pcd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=256008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}