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.
- 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, to which it will scale up or down based on your entry.
There are also several presets that allow you to make your widget pulse, fade in, scale up, etc. You can customize each by changing their parameters.
These basic 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 +, then choose the Scale effect and set its value to 100 → 150.
Most parameters work the same way for almost all animation types and effects: duration, delay, acceleration, and loop. A loop allows your animation to repeat as a cycle or in the reverse mode (when it runs from the end to the start point after the animation finishes).
If your animation includes multiple steps, you can set a loop to specific steps only. Note that once a step is looped, all subsequent steps automatically become looped as well.
The ‘Once per user’ option allows you to play an animation only once for each visitor. For users that load more than once, all widgets with this option will be hidden.
There are also specific parameters that can be applied only to certain animation types:
- Start when in view, 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 When in View control to delay an animation until the widget actually 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 height in pixels.
- 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 the speed of an animation is the less scrolling it requires to play.
