Design and Styling
Animations

Appear on screen trigger

15min

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



Basic actions when working with animations:



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.

Document image


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

Document image


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.

Document image


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.

Document image


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.

Document image


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

Document image


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

Document image


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
Document image


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

If you add new effects or change current ones, the Custom preset will be automatically installed. Selecting a preset will reset all your settings to the default values for that preset.

Effects

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

Document image


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.
Document image


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

Document image




Document image




Document image




Document image




Document image




Document image




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 start and end values in the effect settings takes into account the initial state of the element, and is in no way related to the start and end settings of other effects. Consistent playback of effects is achieved by adjusting the delay. If several effects have zero delay, they will play simultaneously.



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.

Document image


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.

Document image


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.

Document image