Animation

You can apply animations to all widgets except for Hotspot and Google Maps. 

To animate a widget, click the Animation icon in its controls. There are four different types of animation that you can select:

• On Load begins once a page is loaded in the browser;
• On Click (On Tap for mobile devices) requires a visitor to click on the widget or its trigger;
• On Hover (On Hold for mobile devices) starts when a visitor moves their cursor over the widget or its trigger;
• On Scroll starts in a specified position on the page and follows scrolling.
  
  

In mobile and tablet layouts, the On Hover animation cannot be used.

To make the animation On Scroll work, increase the height of your page.

Animation effects

After you have selected one of the animation types, you will be presented with a list of possible effects. Four of them are basic: 

• Move. Drag a widget to the spot where it needs to be after the animation ends, position it with the keyboard arrows, or enter the value in pixels. Additionally, you can enable the Bezier toggle to create curves that define the motion path of a widget.
  
  
• Opacity. The value for this parameter indicates opacity percentage: the first one shows the starting opacity, while the second displays the opacity of the widget after the animation stops.
• Rotate. Enter degrees to determine a widget’s rotation.
• Scale. The value shows the percentage of the initial size of the widget, which will scale up or down based on your entry. 
  

Several presets also allow you to make your widget pulse, fade in, scale up, etc. You can customize each by changing its parameters.  

Animation parameters

Most parameters work the same for almost all animation types and effects: duration, delay, acceleration, and loop. A loop allows your animation to repeat as a cycle or in reverse mode (when it runs from the end to the start point after the animation finishes). 

If your animation includes multiple steps, you can only set a loop to specific steps. Note that all subsequent steps automatically become looped once a step is looped. 

The ‘Once per user’ option allows you to play an animation only once for each visitor. All widgets with this option will be hidden for users that load more than once.

There are also specific parameters that can be applied only to certain animation types: 

• Start in sight, for the animation On Load. By default, On Load animations start as soon as a page finishes loading, even if some widgets might not be visible yet. Use the Start in sight control located under Display settings to delay an animation until the widget appears on your visitor’s screen.
• Start point, for the animation On Scroll. You can choose Start Point for On Scroll animation so that it will start once the top edge of the widget is aligned with the Top, Center, or Bottom (by default) of the screen. Offset allows you to set the Start Point at the exact pixel height.

• Speed, for the animation On Scroll. By changing Speed, you can define how long each step of an On Scroll animation is displayed while a visitor is scrolling. If you set the Speed to 1x, the step will be displayed for the duration of the page by one pixel; with a Speed of 0.5x, by two pixels. The faster an animation speeds, the less scrolling it requires to play.

Animation steps

The effects can be combined using steps. To add a new step, click the plus icon under the widget.

For example, say you want the widget to change its opacity after a user clicks on it, and then scale up to 150%. Select the On Click animation with the Opacity effect. Next, click +, choose the Scale effect, and set its value to 100 → 150.

Animation triggers

Animation can be initiated not only by an animated widget itself but also by another widget that becomes a trigger in this case. To set a trigger, select the animation type, click ‘Add trigger’, and choose whichever widget you prefer. A widget can have up to 20 different triggers. 

Adding multiple animations

You can apply different types of animation to the same widget simultaneously. To do so, click ‘Add’ on the bottom of the animation controls.

Then click through to the animation controls, where you’ll see a list of all animations added to your widget. Click the animation title to view or edit its parameters.

Animating multiple widgets

You can simultaneously animate more than one widget. Select all necessary widgets with Shift + click, and then proceed with Animation control as usual. All changes will be applied identically to each individual widget in the selection.

If you select a mix of animated and regular widgets, you’ll be prompted to merge different animations so that each selected widget has identical attributes.

How to disable animations

To turn off the applied animation, hover over its title (Click, Load, Hover, or Scroll), click on the arrow near it, and select ‘None’ from the dropdown. All the animation parameters will be saved, and you can apply them later. 

If you want to reset parameters, click ‘None’ and then ‘Delete’ to clear old animation content.