Hero

2 min read Updated

The Hero addon adds content animations to the free Hero Image widget. In each frame, you can choose an animation for the frame content, such as Fade in up or Bounce in, and the event that starts it: the frame shows, the page loads, the content scrolls into view, or a visitor hovers over it.

For the widget’s other settings, see the Hero Image widget documentation.

View the Hero demo.

Requirements

Go to SiteOriginPremium Addons and activate Hero. This also activates the Hero Image widget.

Add a Content Animation

  1. Edit the Hero Image widget.
  2. In Hero frames, open a frame.
  3. Open the Content animation section. It is below Buttons and above Background.
  4. Choose an Animation and an Animation event.
  5. Save the page.

The animation applies to all the content of the frame: the text from the Content editor and the buttons. The background doesn’t animate. Each frame has its own animation settings.

Premium Content animation settings in a Hero frame

Content Animation Settings

Animation
The animation to play. The list has attention animations (such as Bounce, Pulse and Tada), “in” animations that bring the content into view (such as Fade in up and Zoom in), and “out” animations (such as Fade out). The content shows again when an “out” animation ends. At the moment, the list shows Fade in top left and Fade in top right twice. The second pair are the bottom left and bottom right animations. Default: None, which turns the animation off.

Animation event
What starts the animation. Default: Frame display.

  • Element enters screen: the content scrolls into view. Screen offset sets how far. The animation plays once.
  • Element in screen: all of the content is in view. The animation plays once.
  • Page load: the page loads. The animation plays once.
  • On hover: the pointer moves over the content. The animation plays each time.
  • Frame display: the frame shows. The animation plays each time the frame shows. Use this event in a hero with more than one frame.

Screen offset
How many pixels of the content 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.

Hide before animation
Hides the content until its animation starts. With Frame display, the content also hides when the frame moves away. Default: on. Turn it off for the On hover event, or the content stays hidden until a visitor hovers over it.

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

Reduced Motion

Some visitors turn on a reduced motion setting on their device. The animation then finishes at once, without visible movement. See Reduced Motion Support.