How to Use Interactions Library

The Interaction Library provides a quick and convenient way to browse, preview, and add pre-made interactions to your page. It is designed to help you create dynamic animations and effects without building everything from scratch.

When you insert an interaction from the library, it automatically adds all the necessary blocks required for that interaction. At the same time, it imports the interaction setup and opens it in the Interaction Editor, ready for you to review or customize as needed.

You can access the Interaction Library by clicking the Interactions button located at the top of the Block Editor. This will open a modal window showing all available pre-made interactions that you can explore and insert into your page.

Adding an Interaction

When you find an interaction you would like to use, simply hover over it and click Insert to add it immediately to your page.

Customizing an Interaction

If you prefer to make adjustments before adding it, click Customize instead. This opens a customization panel where you can modify the appearance or timing of the interaction before inserting it into your layout. Here, you can change the trigger type, adjust the animation duration, or modify the target elements to better fit your design. Any updates you make are reflected instantly, allowing you to preview and perfect the effect before publishing.

After inserting or customizing an interaction, preview your page to see it in action. Interactions from the library are ready to use immediately, so you will see them working as soon as they are added. If any adjustments are needed, return to the Interaction Editor to refine the animation behavior or visual timing.