EB Animated Wrapper is an advanced & premium wrapper block from Essential Blocks for Gutenberg. It enables you to add smooth, customizable animations to any block placed inside it. With this dynamic block, you can bring motion, interactivity, and visual appeal to your WordPress layouts.

Learn how to enhance your Gutenberg layouts with dynamic animations using the EB Animated Wrapper block.

How To Activate The EB Animated Wrapper Block? #

To activate the Animated Wrapper, navigate to Essential Blocks → Blocks. Then, from the Creative Blocks section, toggle to enable the block as shown below.

Note: Animated Wrapper is a premium block. To use this, you will need to install and activate the Essential Blocks PRO plugin on your website along with the free version.

How To Configure The Animated Wrapper In Gutenberg? #

Open the page or post where you want to display your Animated wrapper, then add the EB Animated wrapper block to that section. Search for the ‘Animated wrapper’ block and insert it into the desired section.

After inserting the Animated Wrapper block, you’ll see a blank canvas. Click the ‘+’ icon inside the wrapper to add any Essential Blocks element you prefer.

On the left panel, you’ll find 7 Animation Types. Each type provides a different movement pattern, such as up‑down or left‑right. Choose the one that best fits your design and content needs.

However, if you want to fine-tune the layout or enhance the design, you can customize each part’s structure for the following options.

General  #

In the General Settings, you can customize effects on the blocks inside the wrapper based on your preferences. These options allow you to fine-tune the animation behavior and display it exactly the way you want on your website.

Animation Type #

You can choose from up to 7 animation slide types for your wrapper, including Slide Up-Down-Left-Right, Slide Left Reveal, Slide Right Reveal and Slide ScrollX. Each animation displays the content at full width and transitions smoothly from one state to another.

Animation Ease #

Enhance your block animations with 15 easing styles from smooth fades to playful bounces. These presets control how motion starts, flows, and ends, helping you create more natural, engaging transitions in your Gutenberg layouts.

Scroll Speed & Distance #

You can fine-tune both Scroll Speed and Scroll Distance to control how your pinned section behaves during animation.

Scroll Speed: Adjusts how quickly the section scrolls while pinned. 

Lower values make the scroll slower, while higher values make it scroll faster.

• Lower values → the scroll speed slows down, so the animation takes longer to progress.
• Higher values → the scroll speed increases, so the animation completes more quickly.

Scroll Distance: Defines how much scrolling is required to complete the animation.

Higher values mean more scrolling is required.

• Higher values make the animation take more scrolling to finish; lower values finish it faster.

Reset: A Reset button is available for both settings to restore them to their default values.

Alignment #

You can customize both vertical and horizontal alignment using the dropdown menus. These options help you position your wrapper exactly where you want it.

Vertical Alignment: Choose from Top, Center, or Bottom.

Horizontal Alignment: Choose from Left, Center or Right.

Advanced  #

In the Advanced tab, you can easily access and customize a wide range of options to fine-tune your block’s appearance and behavior. 

You can customize the wrapper’s margin, padding, background, border and shadow from the Advanced tab.

• Margin: Controls the space outside the block, helping you adjust how far it sits from other elements.
• Padding: Controls the space inside the block, creating room between the block’s content and its edges.
• Background: Allows you set a background color, gradient, or image for the block.
• Border: Adds an outline around the block. You can adjust its size, color and style.
• Shadow: Adds a shadow behind the block to create depth or highlight the element.

Final Outcome #

By following this guide, you have learned how to add and configure the Animated Wrapper block in the Gutenberg Page Builder. With this feature, you can design a fully customized Animated WordPress layout by controlling alignment, spacing, and responsiveness with ease.

That’s it! You can now easily add and use an Animated Wrapper block to create a custom Animated section in the Gutenberg Page Builder. 
Getting stuck? Feel free to Contact Our Support for further assistance.