WordPress Block Animation Tutorial: SiteOrigin Premium Guide

3 min read Updated

Block Animations adds animations to Page Builder rows, columns and widgets. You choose an animation, such as Fade in or Bounce, and the event that starts it: the element scrolls into view, the page loads, or a visitor hovers over the element.

View the Block Animations demo.

Requirements

Go to SiteOriginPremium Addons and activate Block Animations.

Add an Animation

The addon adds an Animations group to the Page Builder style settings of rows, columns and widgets.

  • Row: open the row’s settings menu and choose Edit Row. The settings are in Row Styles.
  • Column: in the Edit Row dialog, click a column in the row preview. The settings are in the column’s styles, for example Column 2 Styles.
  • Widget: open the widget to edit it. The settings are in Widget Styles.

Open the Animations group, choose an Animation, then set the other settings. The animation plays on the front end.

The Animations group in Widget Styles with Animation set to Fade in up and the other animation settings

Animation Settings

Animation
The animation to play. The list has attention animations (such as Bounce, Pulse and Tada), “in” animations that bring the element into view (such as Fade in up and Zoom in), and “out” animations that take it out of view (such as Fade out and Zoom out). Default: None, which turns the animation off.

Animation Event
What starts the animation. Default: Element Enters Screen.

  • Element Enters Screen: the element scrolls into view. Screen Offset sets how far.
  • Element In Screen: the whole element is in view. Use it only for elements shorter than the browser window. A taller element doesn’t animate, and stays hidden when Hide Before Animation is on.
  • Page Load: the page loads.
  • Hover: the pointer moves over the element. The animation plays each time.

Screen Offset
How many pixels of the element must be on screen before it animates. Applies to Element Enters Screen. Default: 0.

Animation Speed
How long the animation lasts, in seconds. Default: 1.

Repeat Animation
With the Hover event, the animation repeats while the pointer stays over the element. It has no effect with the other events. Default: off.

Hide Before Animation
Hides the element until its animation starts. Default: on. Turn it off for the Hover event, or the element stays hidden until a visitor hovers over it.

Disable Animation on Mobile
Check Disabled to show the element without animation at the mobile width. Page Builder sets this width in SettingsPage Builder, Layout tab, Mobile Width (default 780px). Default: off.

Animation Final State
What happens to the element when the animation ends. Visible keeps it on the page. Hidden makes it invisible but keeps its space. Removed takes it out of the layout, so the content below moves up. An “out” animation needs Hidden or Removed, or the element shows again when the animation ends. Default: Visible.

Animation Delay
The number of seconds to wait after the event before the animation starts. Default: 0.

Animation Debounce
This setting has no effect at the moment. Default: 0.1.

Animations in the Layout Slider

You can animate rows, columns and widgets inside a Layout Slider widget frame. Edit the Layout Slider, open a frame, and click Open Builder. Then edit a row, column or widget and open Animations. Two more settings show here:

Animation Event: Slide Display
Plays the animation each time the frame shows. This is the default event inside a Layout Slider frame.

Slide Out Animation
Plays each time the frame moves away. Animation Speed sets how long it lasts. With Hide Before Animation on, the element stays hidden after it ends. Default: None.

Reduced Motion

Some visitors turn on a reduced motion setting on their device. Block Animations then shows each element in its final state at once, without movement. See Reduced Motion Support.