EB Interactive Animation extension helps you design static website sections with engaging animations directly from your Gutenberg editor. This extension allows you to trigger animations based on page load, scrolling and many more, making your web pages fully dynamic and interactive to grab visitors’ attention. Plus, this block is built with GSAP – a powerful JavaScript animation library for smooth and engaging motion effects.
Note: Before you start, make sure that you have installed & activated the Essential Blocks Pro plugin to use the EB Interactive Animation extension.
How To Find The Interactive Animation? #
First, add a block of Essential Blocks in which you want to add interactive animation. For the tutorial purpose, we are using the Infobox block. Click on the block and move to the ‘Advanced’ tab of the block’s settings panel to configure interactive animation.
In the ‘Advanced’ tab, you will find multiple dropdown options for versatile configurations. Scroll down to the ‘Interactive Animation’ dropdown and click on it. Here you will find a toggle button to enable interactive animation for this particular block. Simply click on it to enable it.
Once you have enabled the Interactive Animation extension, you can see all the configuration options under this dropdown. This extension offers versatile animation settings to add responsive animations to your website pages.
How to Configure the ‘Interactive Animation’? #
In the ‘Animation Type’ field, three options are available – ‘From’, ‘To’, and ‘From To’. You can control how you want the animation for the block to start or end. Choose the options as required for your block to animate.
Transform Effects #
Let’s set the transition effects you want to add to the block. To animate the block, set the horizontal & vertical pivot points for transformations. Next, set the ‘Duration’,’ ‘Delay,’ etc. as required and style the way you want. In the ‘Ease’ option, adjust how the animation progresses over time for different types of effects you set. You can set your effect as default or choose from 11 different types of easing animations.
Once you are done adding the ‘Transform Effects’, customize the ‘Animation Color’, ‘Skew Effects’, ‘Scaling Options’, etc. as needed.
ScrollTrigger Settings #
In EB Interactive Animation’s ‘ScrollTrigger’ settings, you can create attractive scroll-based animations without coding expertise. Scrub, pin or you can trigger anything with ScrollTrigger options. To activate the Scroll/Trigger feature, simply toggle on the ‘Enable ScrollTrigger’.
Scroll Start & End Point #
You can control the ‘Scroll Start’ and Endpoints as well. You will find these options in the ‘Toggle Action’ once you click on the ‘Edit’ icon beside it. Simply define the starting and ending points of the ScrollTrigger.
Marker And Scrub #
The Interactive Animation option is developed focusing on developers. You can see where animations start and end during development. Simply turn on ‘Enable Markers’ to activate the option. The scrubbing option is to synchronize the scroll position with the progress of an animation. You can control the animation between the ScrollTrigger’s start and endpoints.
Animation Settings #
In the ‘Animation Settings’ option, you will find multiple animation settings options to make the animation engaging and responsive.
Yoyo #
When you enable the ‘Yoyo’ option in the Interactive Animation extension, the animated element reverses direction with each repeat. To activate this feature, simply toggle it on.
Stagger #
The Stagger option in EB Interactive Animation allows you to add a delay between the start times of animations for each animated element. This helps make your Gutenberg website animations more structured and visually appealing. You can set the stagger delay from 0.1 seconds to any duration you prefer.
Final Outcome #
With all these EB Interactive Animation options, you can style any section, column, or block in Gutenberg the way you prefer. Let us have a look at our engaging animation created with Interactive Animation.
This is how easily you can add interactive animations to your website using EB Interactive Animation. Getting stuck? Feel free to Contact Our Support for further assistance.
