Block Animations

Add animations to Page Builder rows, columns, and widgets, creating lively transitions that attract attention and improve user interaction with easy to set options.

View the Block Animations Addon demo.

Requirements

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

Usage

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 have the following settings:

Animation
Select the type of animation you’d like to use for this row.

Animation Event
Choose the event that will trigger the animation. The following options are available:

  • Element Enters Screen
  • Element In Screen
  • Page Load
  • Hover

Layout Slider Frame Specific Animation Event
The SiteOrigin Layout Slider Widget offers an 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 when the slide (frame) is displayed.

Screen Offset
How many pixels above the bottom of the screen must the element be before animating in.

Animation Speed
The number of seconds that the incoming animation lasts.

Repeat Animation
If the animation should repeat for the duration of the Animation Event. This is currently only implemented for the Hover Animation Event.

Hide Before Animation
Hide the element before animating.

Animation Final State
The final state of the element after the animation is complete. Choose between Hidden, Visible or Removed.

Animation Delay
The number of seconds after the event to start the animation.

Animation Debounce
The number of seconds to wait after the page stops scrolling before the animation is started. This only applies to the “Element Enters Screen” and “Element In Screen” events.