Animations add interactivity and bring your content to life. They are a strong way to get creative and leave your audience wow-ed at the delivery of your article.
When creating an animation, the first thing you will see is a list of triggers:
- Load Animation (plays when the element becomes visible on the screen)
- Click Animation
- Hover Animation
- Scroll Animation
All animation triggers have the following fields:
|Presets||Dropdown||A pre-defined configuration of animation settings. Selecting a preset sets an animation with just one click. Choosing the "custom" option allows you to set the settings yourself.|
|Duration||Number||The number of seconds it will take for the animation to complete.|
|Delay||Number||Wait a number specified number of seconds before the animation begins to play.|
|Speed Curve||Dropdown||Specifies the speed of the animation throughout its timeline.|
|Loop||ToggleField||Play an animation over and over.|
|Run once||ToggleField||Only play an animation a single time.|
|Effect||DropDown||Specify which property of the element you wish to animate.|
Specify which of the following properties of the targeted element you wish to animate:
background- Change the element's background color.
color- Change the color of the element.
move horizontal- Move the element from a starting x-position to an ending x-position.
move-vertical- Move the element from a starting y-position to an ending y-position.
opacity- Change the transparency of the element.
rotate- Change the element's angle.
scale- Change the element's size.
stagger- Provides a cascading delay to animations on a list of elements. Animates the elements one by one in a sequential manner.
Enhance your creativity by combining multiple animations on a single element for some cool outcomes.
Start an animation when the element becomes visible on the screen.
Load Example - Slide a box to the right as soon as the element comes into view.
Start an animation when a click event is performed.
Click animations have an additional setting:
|Custom trigger||DropDown||Start the animation when a click action is performed on some other element than the one being animated. Trigger elements must have user-defined names in the layers panel. The default trigger is the element that the animation is being applied on.|
Click Example - Click on one element to slide another element to the right.
Start an animation when the mouse positions over the animation-enabled element.
Hover animations have an additional setting:
|Scale element||TextField||Specify a number amount indicating how much to grow or shrink the target element by.|
Hover Example - Scale content by 1.4x its original size when hovered.
Animate an element as you navigate (or scroll) down the page.
Scroll animations have the following settings:
|Position||Dropdown||The animation will be at its beginning when the target element is scrolled to one of the following positions on the screen; center, bottom, or top.|
|Offset start||TextField||Moves the position where the animation starts by a specified number of pixels.|
|Offset end||TextField||Moves the position on the screen where the animation ends by a specified number of pixels.|