WordPress Block Animation Tutorial: SiteOrigin Premium Guide

The SiteOrigin Block Animations Addon allows you to add WordPress block animations to your Page Builder rows, columns, and widgets. Creating lively transitions improves user interaction and helps your content stand out with easy-to-set animation block options.

View the Block Animations Addon demo.

WordPress Block Animation Plugin Requirements

To make use of this addon, go to SiteOriginPremium Addons and activate the Block Animations Addon.

How to Add Animations to WordPress Blocks

To animate a Page Builder row, start by clicking the wrench icon at the far right of the row followed by Edit Row. On the right, you’ll see the Animations tab; click on it to set up your row animation. To animate a widget, hover over the widget and click the Edit link; the Animation tab can be found on the right.

Both row and widget animation tabs include the following WordPress block animation settings:

Animation Type

Select the specific type of animation (e.g., Fade, Slide, or Zoom) you’d like to use for this row or widget.

WordPress Animation Event

Choose the event that will trigger the animation. To optimize user interaction, the following options are available:

  • Element Enters Screen: Triggers when the block first becomes visible.
  • Element In Screen: Triggers while the element is within the viewport.
  • Page Load: Triggers immediately when the URL finishes loading.
  • Hover: Triggers when a user moves their mouse over the block.

Layout Slider Frame Specific Animation Event

The SiteOrigin Layout Slider Widget offers a specialized animation event for frame rows and widgets. To make use of this event, edit a Layout Slider Widget, open a frame, and click the Open Builder button. Edit a row or widget, open the Animations section in the right column, and check the Animation Event drop-down. In addition to the four events mentioned above, you’ll find a new event option labeled Slide Display. If selected, your animation will be triggered specifically when that slide (frame) is displayed.

Screen Offset

Define how many pixels above the bottom of the screen the element must be before the block animation begins.

Animation Speed

Set the number of seconds that the incoming animation lasts. A shorter duration creates a snappier transition.

Repeat Animation

Enable this if the animation should repeat for the duration of the Animation Event. Note: This is currently implemented specifically for the Hover Animation Event.

Hide Before Animation

Toggle this to hide the element completely before the animation trigger is met.

Animation Final State

Define the final state of the element after the animation is complete. Choose between Hidden, Visible, or Removed.

Animation Delay

The number of seconds to wait after the initial event trigger before starting the animation.

Animation Debounce

The number of seconds to wait after the page stops scrolling before the animation starts. This applies specifically to the “Element Enters Screen” and “Element In Screen” events to ensure smooth performance.