{"id":17764,"date":"2025-02-27T10:40:20","date_gmt":"2025-02-27T10:40:20","guid":{"rendered":"https:\/\/essential-blocks.com\/?post_type=docs&p=17764"},"modified":"2025-02-27T11:35:26","modified_gmt":"2025-02-27T11:35:26","password":"","slug":"eb-interactive-animation","status":"publish","type":"docs","link":"https:\/\/essential-blocks.com\/docs\/eb-interactive-animation\/","title":{"rendered":"EB Interactive Animation"},"content":{"rendered":"\n

EB Interactive Animation<\/strong> 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<\/strong> \u2013 a powerful JavaScript animation library for smooth and engaging motion effects.<\/p>\n\n\n\n

\u00a0<\/em>Note<\/em><\/strong>: Before you start, make sure that you have <\/em>installed & activated the Essential Blocks Pro<\/em><\/strong><\/a> <\/em><\/strong>plugin to use the EB Interactive Animation extension.<\/em><\/p>\n\n\n\n

How To Find The Interactive Animation?<\/strong><\/h2>\n\n\n\n

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<\/strong>. Click on the block and move to the \u2018Advanced\u2019<\/strong> tab of the block\u2019s settings panel to configure interactive animation.<\/p>\n\n\n\n

\"EB
<\/figcaption><\/figure>\n\n\n\n

In the \u2018Advanced\u2019<\/strong> tab, you will find multiple dropdown options for versatile configurations. Scroll down to the \u2018Interactive Animation\u2019<\/strong> 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.<\/p>\n\n\n\n

\"EB
<\/figcaption><\/figure>\n\n\n\n

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

\"EB
<\/figcaption><\/figure>\n\n\n\n

How to Configure the ‘Interactive Animation’?<\/strong><\/h2>\n\n\n\n

In the \u2018Animation Type\u2019<\/strong> field, three options are available – \u2018From\u2019<\/strong>, \u2018To\u2019<\/strong>, and \u2018From To\u2019<\/strong>. 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.<\/p>\n\n\n\n

\"EB
<\/figcaption><\/figure>\n\n\n\n

Transform Effects<\/strong><\/h3>\n\n\n\n

Let\u2019s 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 \u2018Duration\u2019<\/strong>,\u2019 \u2018Delay,<\/strong>\u2019 etc. as required and style the way you want. In the \u2018Ease\u2019 <\/strong>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. <\/p>\n\n\n\n

\"EB
<\/figcaption><\/figure>\n\n\n\n

Once you are done adding the \u2018Transform Effects<\/strong>\u2019, customize the \u2018Animation Color\u2019<\/strong>, \u2018Skew Effects<\/strong>\u2019, \u2018Scaling Options<\/strong>\u2019, etc. as needed. <\/p>\n\n\n\n

\"EB
<\/figcaption><\/figure>\n\n\n\n

ScrollTrigger Settings<\/strong><\/h3>\n\n\n\n

In EB Interactive Animation’s \u2018ScrollTrigger\u2019<\/strong> 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 \u2018Enable ScrollTrigger\u2019<\/strong>.<\/p>\n\n\n\n

\"EB
<\/figcaption><\/figure>\n\n\n\n

Scroll Start & End Point<\/strong><\/h4>\n\n\n\n

You can control the \u2018Scroll Start\u2019<\/strong> and Endpoints as well. You will find these options in the \u2018Toggle Action\u2019<\/strong> once you click on the \u2018Edit\u2019 <\/strong>icon beside it. Simply define the starting and ending points of the ScrollTrigger. <\/p>\n\n\n\n

\"EB
<\/figcaption><\/figure>\n\n\n\n

Marker And Scrub<\/strong><\/h4>\n\n\n\n

The Interactive Animation option is developed focusing on developers. You can see where animations start and end during development. Simply turn on \u2018Enable Markers\u2019 <\/strong>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\u2019s start and endpoints.<\/p>\n\n\n\n

\"EB
<\/figcaption><\/figure>\n\n\n\n

Animation Settings<\/strong><\/h3>\n\n\n\n

In the \u2018Animation Settings\u2019<\/strong> option, you will find multiple animation settings options to make the animation engaging and responsive.<\/p>\n\n\n\n

Yoyo<\/strong><\/h4>\n\n\n\n

When you enable the \u2018Yoyo\u2019<\/strong> option in the Interactive Animation extension, the animated element reverses direction with each repeat. To activate this feature, simply toggle it on.<\/p>\n\n\n\n

Stagger<\/strong><\/h4>\n\n\n\n

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

\"EB
<\/figcaption><\/figure>\n\n\n\n

Final Outcome<\/strong><\/h3>\n\n\n\n

With all these EB Interactive Animation <\/strong>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.<\/p>\n\n\n\n

\"EB
<\/figcaption><\/figure>\n\n\n\n

This is how easily you can add interactive animations to your website using EB Interactive Animation. Getting stuck? Feel free to Contact Our Support<\/strong><\/a> for further assistance.<\/p>\n","protected":false},"excerpt":{"rendered":"

You can create a fully dynamic and engaging page for your website using the EB Interactive Animation. This extension is super useful when you want to grab visitor’s attention with eye-catching effects.<\/p>\n","protected":false},"author":19,"featured_media":17769,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","footnotes":""},"doc_category":[11],"doc_tag":[16],"class_list":["post-17764","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-wordpress"],"year_month":"2026-04","word_count":660,"total_views":"1039","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Jemima Naznin","author_nicename":"jemima","author_url":"https:\/\/essential-blocks.com\/author\/jemima\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/essential-blocks.com\/docs-category\/configurations\/"}],"doc_tag_info":[{"term_name":"WordPress","term_url":"https:\/\/essential-blocks.com\/docs-tag\/wordpress\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/17764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/users\/19"}],"version-history":[{"count":7,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/17764\/revisions"}],"predecessor-version":[{"id":21291,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/17764\/revisions\/21291"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media\/17769"}],"wp:attachment":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media?parent=17764"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_category?post=17764"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_tag?post=17764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}