How to add animations and effects to widgets

Every widget's Design panel has an Animations & Effects section. Use it to make a widget animate in as it scrolls into view, change while the page scrolls, or respond when a mouse pointer moves over it. Sections and columns have the same section.

How to add an animation

1. Select the widget and click Edit Design.
2. Open Animations & Effects near the bottom of the panel.
3. Turn on Entrance, Scroll or Hover effects. You can turn on more than one.
4. Pick an effect from the cards that appear.
5. Adjust the settings under the cards.
6. To remove it, turn the switch off.

Turning a switch on picks a starting effect for you: Fade In for Entrance and Scroll, Grow for Hover effects. Click another card to change it.

Which widgets get which triggers

• Entrance and Scroll: every widget, section and column.
• Hover effects: Text, Image, Logo, Video, Divider, Spacer, HTML Embed, Accordion, Tabs, Photo Gallery, List, Nav Links, Menu Icon, and sections and columns.
• The Button family (Button, Download File, Click to Call, Click to Email, OpenTable) has its own hover list instead. See Button widgets.
• On sections and columns, Hover, Entrance and Scroll each sit in their own fold, and there's also Stagger children (below).

Entrance

Plays once, when the widget first comes into view (when 15 % of it is on screen, or for a very tall widget, when it fills 15 % of the screen). Until then the widget is hidden so it doesn't flash.

Effects, grouped as in the picker:

• Fading: Fade In, Fade In Down, Fade In Left, Fade In Right, Fade In Up.
• Sliding: Slide In Down, Slide In Left, Slide In Right, Slide In Up.
• Bouncing: Bounce In, Bounce In Down, Bounce In Left, Bounce In Right, Bounce In Up.
• Zooming: Zoom In, Zoom In Down, Zoom In Left, Zoom In Right, Zoom In Up.
• Flipping: Flip, Flip In X, Flip In Y.
• Rotating: Rotate In, Rotate In Down Left, Rotate In Down Right, Rotate In Up Left, Rotate In Up Right.
• Rolling: Roll In.
• Attention Seekers: Flash, Pulse, Rubber Band, Shake, Swing, Tada, Wobble.

Settings:

• Duration: 100 to 3,000 ms, in steps of 50. Starts at the effect's own speed: 600 ms for fades and zooms, 700 ms for slides, rotates and Roll In, 800 ms for bounces and flips, 1,000 ms for attention seekers.
• Delay: 0 to 3,000 ms before it starts. Default 0.
• Easing: Linear, Ease, In, Out or In & Out. Most effects start on Out; flips on In & Out; attention seekers on Ease.
• Intensity: 1 to 10, default 5. Higher moves the widget further, shrinks or overshoots it more, and turns it further; lower makes the same effect gentler. For example, Fade In Up at 10 rises from twice as far as at 5, and at 1 it barely moves. Fade In and Flash only change opacity, so Intensity doesn't change them.

Scroll

Changes the widget smoothly while the page scrolls, and goes back when you scroll back.

Effects: Fade In, Move Left, Move Right, Move Top, Move Bottom, Grow, Shrink, Rotate, Opacity, Grayscale, Shadow, Parallax.

Settings:

• Start at and End at: 0 to 100 %, in steps of 5. They mark where in the widget's trip across the screen the effect starts and finishes. 0 % is the moment it appears at the bottom of the screen, 50 % is about the middle, 100 % is when it leaves at the top. Defaults 0 % and 100 %.
• Direction: In (the effect builds up, for example fading in) or Out (the reverse, for example fading out). Default In.
• Intensity: 1 to 10, default 5. For example, how far Move goes, how much Grow grows, or how far Parallax shifts.

Hover effects

Plays while a mouse pointer is over the widget, and goes back when it leaves.

Effects: Grow, Shrink, Rotate, Move Top, Move Bottom, Move Left, Move Right, Apply Opacity, Grayscale, Shadow, Float, Blur.

Settings:

• Duration: 100 to 1,000 ms, default 300 ms.
• Intensity: 1 to 10, default 5.

Image, Icon and Shape also have Hover effect (desktop) chips in their own sections. Those are a separate, simpler set; see the Design panel basics.

Stagger children (sections and columns)

Turn on Stagger children in a section's or column's Animations & Effects to bring its widgets in one after another.

• The slider sets the gap between each one: 20 to 500 ms, default 80 ms.
• The first widget starts on time, the second waits one gap, the third two gaps, and so on, on top of each widget's own Delay.
• It only affects widgets that have their own Entrance animation. Give each card or heading an entrance first.

In the editor

• Entrance animations play on the canvas when the widget first scrolls into view after the editor loads. Picking a different effect, or moving the Intensity slider, plays it again straight away. To watch it again after changing only the timing, reload the editor.
• Scroll effects follow the canvas as you scroll it.
• Hover effects work when you point at the widget.
• Zeus can add these for you when you ask in the editor chat ("fade the cards in one after another"). See Zeus in the editor.

Examples

• A roofer's three service cards: give each card Fade In Up, 600 ms. On their column, turn on Stagger children at 150 ms so they rise in turn.
• A hero photo with depth: on the image, Scroll > Parallax, Intensity 4, so it drifts slower than the page.
• A "Book now" banner that catches the eye: Entrance > Pulse with a Delay of 1,000 ms.
• A team grid: on each photo, Hover effects > Grayscale so the face in focus stands out.

Limits and what it can't do

• Entrance plays once per page visit. Scrolling away and back doesn't replay it.
• Animations are the same on every screen size. To skip one on phones, use a separate widget hidden on the other sizes.
• While a widget is pinned (Fixed or Floating), the boxes around it don't play their entrance animation on that screen size, so the widget can pin to the screen.
• Hover effects need a mouse, so phones and tablets don't show them.
• Entrance Intensity changes distance, size and turning, not speed. Use Duration and Easing to change how fast it feels.
• The site's Pause motion control for visitors covers motion layers like the cursor trail and Media Vortex, not these widget animations.

Who can use it

Agency team members with the Mount Olympus tool. Client people need the Editor permission, because animations are part of the design.

Troubleshooting

• My animation doesn't play in the editor: entrance plays once, when the widget first comes into view. Reload the editor and scroll to it.
• It plays only once: that's how Entrance works. For an effect that runs every time the page scrolls, use Scroll instead.
• The widget is invisible until I scroll: that's the entrance waiting to play. If it never appears, check the widget isn't pinned and the box around it isn't hidden on this screen size.
• Stagger does nothing: the widgets inside need their own Entrance animation.
• The hover effect doesn't show on my phone: hover needs a mouse pointer.