You can apply animations to all widgets, except for Hotspot, Twitter, Facebook, 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 browser;
- On Click requires a visitor to click on the widget or its trigger;
- On Hover 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.
Note: In mobile and tablet layouts, the On Hover animation cannot be used.
Note: To make the animation On Scroll work, increase the height of your page.
Note: In Safari, the On scroll animations may appear less smooth compared to other browsers. If this happens to your project, please consider reducing the animation speed to 0,65x or lower.
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, then click ‘Add trigger’, and choose whichever widget you prefer. A widget can have up to three different triggers.
Note: The Video, Music, Slideshow, Form, Facebook, Twitter, and Google Maps widgets cannot be used as triggers.
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.
How to disable the animation
To turn off the applied animation, hover over its title (Click, Load, Hover, or Scroll), then click on the arrow near it, and select ‘None’ from the dropdown. All the animation parameters will be saved and you will be able to apply them later.
If you want to reset parameters, click ‘None’ and then ‘Delete’ to clear old animation content.
