The Block Animations Addon adds animation options to Page Builder rows, cells, and widgets.
View the Block Animations Addon demo.
- SiteOrigin Premium Plugin
- Optional: SiteOrigin Widgets Bundle Plugin
- Optional: Page Builder by SiteOrigin Plugin
To make use of this addon, go to SiteOriginPremium Addons and activate the Block Animations Addon.
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:
Select the type of animation you’d like to use for this row.
Choose the event that will trigger the animation. The following options are available:
- Element Enters Screen
- Element In Screen
- Page Load
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.
How many pixels above the bottom of the screen must the element be before animating in.
The number of seconds that the incoming animation lasts.
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.
The number of seconds after the event to start the animation.
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.