---
title: "Add animations"
slug: "add-animations"
updated: 2026-08-17T12:41:29Z
published: 2026-08-19T08:43:52Z
canonical: "docs.grassfish.com/add-animations"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.grassfish.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add animations

You can add animations to individual spot elements such as fading or flying.

To do so, perform the following steps:

1. On the HTML Composer canvas, select the element that you want to add an animation to.
2. In the **Elements** pane, click on **Animations**.
3. 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.
4. Optionally, specify a **Delay** after which an animation starts in seconds. The time is subtracted from the duration of the page.
5. 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](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](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](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](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](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. |

1. 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.
2. Click **Save** to save your changes.

![](https://cdn.document360.io/e2b87f73-d9f5-43cb-8182-2641762664fd/Images/Documentation/add-animations-image-we9mju79.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A21%3A40Z&se=2026-11-06T21%3A21%3A40Z&sr=c&sp=r&sig=GZ3ADbNbddlAOHOWf77MHQ%2Bh5Afq4F2aOt8pDEZgYnE%3D)

> [!NOTE]
> Note
> 
> Elements that contain actions are marked with the following icon: ![](https://cdn.document360.io/e2b87f73-d9f5-43cb-8182-2641762664fd/Images/Documentation/add-animations-image-bm62zeo9.png?sv=2026-02-06&spr=https&st=2026-11-06T20%3A21%3A40Z&se=2026-11-06T21%3A21%3A40Z&sr=c&sp=r&sig=GZ3ADbNbddlAOHOWf77MHQ%2Bh5Afq4F2aOt8pDEZgYnE%3D)