Appear on screen trigger

With Appear on screen trigger, you may set up the animation that will play when an element appears on the screen.

Settings for the Appear on the screen trigger

Start

With this setting, you may set the moment when the animation starts playing on the screen. By default, the " Element starts entering viewport" option is enabled, which is when the element's top border appears on the screen.

When choosing the "Half of element entered viewport" option, the animation will play when the middle of the element appears on the screen.

When choosing the "Element is fully visible in viewport" option, the animation will play when the element completely appears within the user-visible area of the page.

Replay

You may use the setting to play the animation when the element reappears on the screen. By default, this option is disabled. The animation will only play the first time the element appears on the screen.

If “Yes” , the animation will play every time the element appears on the screen.

Loop

This is used for the continuous playback of animation on the screen. By default this option is disabled, the animation will only play once .

Loop: after the end, the animation will start again from the first frame.

Loop with reverse: after the end, the animation will play in reverse.

Presets

You may select one of the presets. This will add a set of effects with predefined settings.

The following types of presets are available for “Appear on screen” trigger:

Fade In

Scale In

Scale In Bottom

Flip Horizontal

Flip Vertical

Slide In From Top

Slide In From Left

Slide In From Right

Slide In From Bottom

Custom

By default, when adding a trigger for animation, the "Fade In" option is used.

Effects

Effects are used to define behavior of an element when it appears on the screen. To add an effect, click “+” on the right.

6 effects can be customized :

Move : to move an element along the X, Y, and Z axes.

Scale : to scale (increase or decrease) the size of an element within the range from 0 to 100% (from 0 to 1) or more than 100% (1+).

Rotate : to rotate an element along the X, Y, and Z axes.

Skew :  to skew an element along the X and Y axes.

Opacity : to change the opacity of an element from 0 (completely invisible) to 100% (completely visible) or vice versa (from visible to invisible).

Size : to change the size of an element by width and height.

Clicking on the effect name will take you to its settings. Here you can view the default options and set the desired parameters.

The following settings are available for effects:

Start and End

With these settings you can set the value of the effect parameters at the beginning and end of animation.

Timing

With these settings you can set animation duration and  delay before the effect starts in seconds.

Easing

With these settings you can set the pattern of acceleration and deceleration of the effect throughout the animation to improve its perception.

The added effect can be deleted at any resolution by clicking on the three dots and selecting the appropriate action, and it will be deleted at all resolutions.

If you do not want to play the effect for the selected resolution, you can hide it by clicking on the eye icon to the right of the name.

Breakpoints

Here you can disable animation for various breakpoints. By default, animation is enabled for all breakpoints.

Settings are inherited from the base resolution. For example, if you disable animation on a tablet, it will only work on a computer; mobile breakpoints will be disabled.

You may enable or disable animation playback for each device by moving the slider to the appropriate position.