From a WP Stackable fan!

Compatibility with Beaver Builder?

There does not appear to be mention of 'Lifetime Updates and Support'. Is this not included in the plans?

How well does it integrate with Divi?

Group

Software

Development & IT

Sub category

Development tools

Product tag

Development tool

Best for

Developers

Freelancers

Marketing agencies

Alternative to

Elementor

Webflow

Integrations

Gutenberg

Terms and conditions

Facebook

YouTube.

Changelog

Support

From the Founder's Post from Interactions!

Founder

<p class=""></p><h4><b style="font-size: 14px; color: rgb(0, 0, 0);">Build interactive WordPress experiences like animations, triggers, and live data without leaving the block editor</b></h4><p class=""><b style="color:#000000; text-decoration:none">Build interactive elements directly in the block editor</b></p><ul><li><b>Work directly inside Gutenberg</b>, so you can add interactions where you already build without rebuilding your layout</li><li><b>Apply animations and behavior to any block</b>, from core WordPress blocks to third-party plugins</li><li><b>Create high-end interactive layouts without writing JavaScript</b></li></ul><p class="">
        <div
          class="story-img-container open-carousel-modal-on-click"
          data-story-image-id="Interactions-img-493f1c33"
        >
            <img
                class="story-inline-image z-depth-2"
                src="https://appsumo2-cdn.appsumo.com/media/stories/images/image1_DA1VoUa.png?optimizer=gif"
                alt="Interaction builder"
                srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/image1_DA1VoUa.png?width=495&optimizer=gif 450w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image1_DA1VoUa.png?width=654&optimizer=gif 595w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image1_DA1VoUa.png?width=935&optimizer=gif 850w"
                sizes="(min-width: 950px) 1045px, 100vw"
                width="850" height="500"
                loading="lazy"
            />
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search-plus"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              class="hover-mag-glass svg-inline--fa fa-search-plus fa-w-16"
            >
                <path
                  fill="currentColor""
                  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6                   0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12                   12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6                   9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0                   208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7                   99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136                   136-60.8 136-136z"
                />
           </svg>
        </div>
    </p><p class=""><b style="color:#000000; text-decoration:none">Hit the ground running with a packed library</b></p><ul><li><b>Browse and insert ready-made interactions</b>&nbsp;like polished scroll effects, hover reveals, and animations, and apply them to any layout in seconds</li><li><b>Customize imported interactions</b>&nbsp;by swapping out media or adjusting colors to match your vision without rebuilding from scratch</li><li><b>Import and export interactions</b>&nbsp;across projects, so you can reuse your best builds across sites</li></ul><p class="">
        <div
          class="story-img-container open-carousel-modal-on-click"
          data-story-image-id="Interactions-img-ac0b260a"
        >
            <img
                class="story-inline-image z-depth-2"
                src="https://appsumo2-cdn.appsumo.com/media/stories/images/image3_evStVpy.png?optimizer=gif"
                alt="Interaction library"
                srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/image3_evStVpy.png?width=495&optimizer=gif 450w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image3_evStVpy.png?width=654&optimizer=gif 595w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image3_evStVpy.png?width=935&optimizer=gif 850w"
                sizes="(min-width: 950px) 1045px, 100vw"
                width="850" height="500"
                loading="lazy"
            />
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search-plus"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              class="hover-mag-glass svg-inline--fa fa-search-plus fa-w-16"
            >
                <path
                  fill="currentColor""
                  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6                   0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12                   12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6                   9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0                   208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7                   99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136                   136-60.8 136-136z"
                />
           </svg>
        </div>
    </p><p class=""><b style="color:#000000; text-decoration:none">Create interactions with the visual timeline</b></p><ul><li><b>Control animations, timing, and behavior</b>&nbsp;on a visual drag-and-drop timeline—no coding required</li><li><b style="color:#000000; text-decoration:none">Apply interactions to a single block, multiple blocks, or across your entire site</b></li><li><b>Preview interactions live in the block editor</b>,&nbsp;so you can see exactly what a visitor will experience before publishing</li></ul><p class="">
        <div
          class="story-img-container open-carousel-modal-on-click"
          data-story-image-id="Interactions-img-990059bd"
        >
            <img
                class="story-inline-image z-depth-2"
                src="https://appsumo2-cdn.appsumo.com/media/stories/images/image2_ZvKUdPz.png?optimizer=gif"
                alt="Interaction timeline"
                srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/image2_ZvKUdPz.png?width=495&optimizer=gif 450w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image2_ZvKUdPz.png?width=654&optimizer=gif 595w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image2_ZvKUdPz.png?width=935&optimizer=gif 850w"
                sizes="(min-width: 950px) 1045px, 100vw"
                width="850" height="500"
                loading="lazy"
            />
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search-plus"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              class="hover-mag-glass svg-inline--fa fa-search-plus fa-w-16"
            >
                <path
                  fill="currentColor""
                  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6                   0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12                   12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6                   9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0                   208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7                   99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136                   136-60.8 136-136z"
                />
           </svg>
        </div>
    </p><p class=""><b style="color:#000000; text-decoration:none">Go beyond animations with triggers, actions, and data</b></p><ul><li><b>Activate interactions on scroll, hover, click, and viewport events</b>&nbsp;using flexible trigger types including page load, exit intent, and URL hash change</li><li><b>Reference values from previous steps</b>&nbsp;to chain data across actions, like fetch, calculate, and display content</li><li><b>Run custom JavaScript or PHP snippets</b>&nbsp;inside an interaction, so you can extend behavior beyond the built-in action set</li><li><b>Get and set input values, post data, and local storage</b>&nbsp;to build complex experiences like multi-step forms, like buttons, and interest calculators</li></ul><p class="">
        <div
          class="story-img-container open-carousel-modal-on-click"
          data-story-image-id="Interactions-img-a6ec1374"
        >
            <img
                class="story-inline-image z-depth-2"
                src="https://appsumo2-cdn.appsumo.com/media/stories/images/image4_dVg1JRZ.png?optimizer=gif"
                alt="Data actions panel"
                srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/image4_dVg1JRZ.png?width=495&optimizer=gif 450w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image4_dVg1JRZ.png?width=654&optimizer=gif 595w,
                         https://appsumo2-cdn.appsumo.com/media/stories/images/image4_dVg1JRZ.png?width=935&optimizer=gif 850w"
                sizes="(min-width: 950px) 1045px, 100vw"
                width="850" height="500"
                loading="lazy"
            />
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search-plus"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              class="hover-mag-glass svg-inline--fa fa-search-plus fa-w-16"
            >
                <path
                  fill="currentColor""
                  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6                   0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12                   12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6                   9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0                   208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7                   99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136                   136-60.8 136-136z"
                />
           </svg>
        </div>
    </p>

Add scroll animations, hover effects, click triggers, and interactions to any WordPress block without coding

<div><p class=""><b style="color:#000000; text-decoration:none">Build interactive WordPress experiences like animations, triggers, and live data without leaving the block editor</b></p><p class=""><b style="color:#000000; text-decoration:none">Build interactive elements directly in the block editor</b></p><ul><li><b>Work directly inside Gutenberg</b>, so you can add interactions where you already build without rebuilding your layout</li><li><b>Apply animations and behavior to any block</b>, from core WordPress blocks to third-party plugins</li><li><b>Create high-end interactive layouts without writing JavaScript</b></li></ul></div>

<div><p class=""><b style="color:#000000; text-decoration:none">Hit the ground running with a packed library</b></p><ul><li><b>Browse and insert ready-made interactions</b> like polished scroll effects, hover reveals, and animations, and apply them to any layout in seconds</li><li><b>Customize imported interactions</b> by swapping out media or adjusting colors to match your vision without rebuilding from scratch</li><li><b>Import and export interactions</b> across projects, so you can reuse your best builds across sites</li></ul></div>

<div><p class=""><b style="color:#000000; text-decoration:none">Create interactions with the visual timeline</b></p><ul><li><b>Control animations, timing, and behavior</b> on a visual drag-and-drop timeline—no coding required</li><li><b style="color:#000000; text-decoration:none">Apply interactions to a single block, multiple blocks, or across your entire site</b></li><li><b>Preview interactions live in the block editor</b> so you can see exactly what a visitor will experience before publishing</li></ul></div>

<div><p class=""><b style="color:#000000; text-decoration:none">Go beyond animations with triggers, actions, and data</b></p><ul><li><b>Activate interactions on scroll, hover, click, and viewport events</b> using flexible trigger types including page load, exit intent, and URL hash change</li><li><b>Reference values from previous steps</b> to chain data across actions, like fetch, calculate, and display content</li><li><b>Run custom JavaScript or PHP snippets</b> inside an interaction, so you can extend behavior beyond the built-in action set</li><li><b>Get and set input values, post data, and local storage</b> to build complex experiences like multi-step forms, like buttons, and interest calculators</li></ul></div>

Add animations to WordPress blocks

Interactions Questions

Share Interactions

Share Interactions

Share Interactions

Share Interactions

Choose a plan