You can add animations to individual spot elements such as fading or flying.
To do so, perform the following steps:
On the HTML Composer canvas, select the element that you want to add an animation to.
In the Elements pane, click on Animations.
Select one of the following tabs to specify when an animation takes place:
Entrance animation: displays the animation at the beginning of a spot.
Transitions: displays the animation between two pages. Transitions contain an entrance animation and an exit animation.
Exit animations: displays the animation at the end of the last page.
Optionally, specify a Delay after which an animation starts in seconds. The time is subtracted from the duration of the page.
Select an animation type and specify its settings:
Fade
Select to let an element fade in or out.
Easing
Specify at which point of the progression of the animation easens:
Start
Start and end
End
Type
Select a temporal sequence for the animation.
To see how the types look, go to https://greensock.com/ease-visualizer
Animate on top
Select to highlight the selected element during transitions.
Fly
Select to let an element fly in or out.
Easing
Specify at which point of the progression of the animation easens:
Start
Start and end
End
Type
Select a temporal sequence for the animation.
To see how the types look, go to https://greensock.com/ease-visualizer
Animate on top
Select to highlight the selected element during transitions.
Direction
Select the direction of the animation:
Left to right
Right to left
Top to bottom
Bottom to top
Offset
Specify the offset from the margin of the selected element container in pixels.
Appear inside
Select to let an element appear inside the container.
Easing
Specify at which point of the progression of the animation easens:
Start
Start and end
End
Type
Select a temporal sequence for the animation.
To see how the types look, go to https://greensock.com/ease-visualizer
Animate on top
Select to highlight the selected element during transitions.
Direction
Select the direction of the animation:
Left to right
Right to left
Top to bottom
Bottom to top
Ken Burns
Select to zoom in on an element.
Easing
Specify at which point of the progression of the animation easens:
Start
Start and end
End
Type
Select a temporal sequence for the animation.
To see how the types look, go to https://greensock.com/ease-visualizer
Animate on top
Select to highlight the selected element during transitions.
Rotation point
Specify the anchor point for the animation:
Center
Center top
Right top
Right center
Right bottom
Center bottom
Left bottom
Left center
Left top
Scale
Specify the size of the element before and after the animation.
Crossfade
Select to let the animation fade in or out with transparency.
Swoop
Select to let an element swoop in.
Easing
Specify at which point of the progression of the animation easens:
Start
Start and end
End
Type
Select a temporal sequence for the animation.
To see how the types look, go to https://greensock.com/ease-visualizer.
Animate on top
Select to highlight the selected element during transitions.
Z rotation / X rotation / Y rotation
Specify the rotation of the animation around the X, Y, or Z axis in increments of 10.
Rotation point
Specify the anchor point for the animation:
Center
Center top
Right top
Right center
Right bottom
Center bottom
Left bottom
Left center
Left top
Distance
When starting the animation, specify the distance and angle of the media to the anchor point.
If the angle is 0, the distance is set to 0 degrees (horizontal) to the right.
Angle
Specify the rotation of the medium around the anchor point.
Combine this setting with Distance to place the medium anywhere around the anchor point.
Scale
Specify the size of the element before and after the animation.
Crossfade
Select to let the animation fade in or out with transparency.
In the Animations window, you can use the following options:
Attach left: attaches the window to the left side of the HTML Composer. This is useful for the preview on the canvas.
Preview: shows a preview of the animation on the canvas.
Click Save to save your changes.
Note
Elements that contain actions are marked with the following icon:
