Animations are displayed in the editor only by the Play Animation button. Checking multiple animations together is only possible in the preview.

Trigger

In the Triggers section you can select the animation triggers: display start, display end and click/tap and configure them in the lower part of the section. The activated triggers are marked with a green icon.

  1. Display start: The configured animation is triggered when the element is displayed. This trigger can be used e.g. with a sequence or with a display of elements controlled by display conditions. Making elements or pages visible by using the navigation function can also be combined with this type of animation trigger.
  2. Display end: The configured animation is triggered when the element is hidden. The display end of an element can be controlled e.g. by a sequence, an exchange container or display conditions. 
  3. Click/tap: Clicking or tapping triggers the animation of an element.

Properties

Start values and Target values of the animation

After activating the checkbox Active an animation can be configured for the respective trigger. With the radio buttons Show first frame of animation in editor and Show last frame of animation in editor, the configured Start and Target values of the animation can be viewed. With the help of the button Play Animation the complete animation can be tested.

Preset

In the Preset option you can choose between various preset animations, such as Bounce, Flash, and Fade out. The Standard setting allows you to configure a custom animation, with various Element properties, Transformations, and Filters available.

Additional animation properties

In addition to the different Presets for the animation, the following animation properties can be configured:

  • Animation duration: The animation duration allows you to set the duration of an animation from the start value to the target value. 
  • Animation delay: This option allows you to configure a delay between the triggering and the start of the animation. 
  • Animation iteration count: This option allows you to set the number of times the animation will be displayed after triggering.
  • Easing: In the drop-down menu you can configure the temporal progress of an animation with the following options:
    • Linear
    • Ease
    • Ease In
    • Ease Out
    • Ease In/Out