Home > Standard elements > Basic element properties  > Animation

Animation

In the animation section you can set how an element should be animated. It is possible to configure three different triggers (Element is shown, Clicking or tapping, Element is hidden) for an animation. In the properties, different animation presets are available. In addition you can freely configure in the default setting Standard, whereby different Element properties, Transformations and Filters are available to you. You can also configure the Animation duration, Animation delay, Animation iteration count, and Easing for each configured animation.

Please note:
As soon as you activate an animation for an element in the properties, depending on the setting the start or end value the animation will be visible when unfolding the Animation section in the properties dialog. When leaving the Animation section, the element is displayed in its non-animated appearance. To fully see the effect of the animation you have to start the preview or press the button "Play Animation".


1. Trigger 

In the trigger section, you can select the three animation triggers Element is shown, Clicking or tapping or Element is hidden and configure them in the lower part of the section. The activated triggers are marked with a green icon. 
  1. Element is shown: The configured animation will start when the element is displayed. This trigger can be used in a sequence driven display or display conditions controlled display of elements. Also, the visibility of elements or pages by using the navigation function can be combined with this type of animation triggering.
  2. Element is hidden: The configured animation is triggered when the element disappears. The display end of an element may be controlled by a sequence, a swap container or configured display conditions. 
  3. Clicking or tapping: Clicking or tapping triggers the animation of an element.
Please note:
When using the "Element is hidden" trigger, note that only the element that you want to animate is hidden and not the parent container itself. Otherwise, the set animation will not be visible. In sequences animations with the trigger "Element is hidden" are visible for a maximum of 2 seconds.

2. Properties

2.1 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.


2.2 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.


2.3 Additional animation properties
In addition to the different Presets for the animation, the following animation properties can be configured:
  1. Animation duration: The animation duration allows you to set the duration of an animation from the start value to the target value. 
  2. Animation delay: This option allows you to configure a delay between the triggering and the start of the animation. 
  3. Animation iteration count: This option allows you to set the number of times the animation will be displayed after triggering.
  4. 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.  
Please note:
If you use the Ease option, the effect of the adjustment does not become visible until you use a correspondingly long animation duration

See also

Size, position, alignment, spacing
Appearance (background, border)
Navigation
Pop-up (Linked Document)
Display conditions (Screensaver, Schedule, Secondary Monitor, Split screen)
Editor settings (lable, template, user rights)

Back To Top