# Animation

Use the animation shortcode to show an After Effects animation.

## Overview

Added in v0.20.4

Use the animation shortcode to show an After Effects animation, powered by [Lottie](https://airbnb.io/lottie/). The Lottie library supports animations that have been exported as JSON with Bodymovin. The animation uses vector graphics and is responsive. The shortcode is a simplified wrapper of the Lottie library that provides basic functionality.

Add the following configuration to your page's frontmatter to enable Lottie animations:

```yml
---
modules: ["lottie"]
---
```

### Default animation

Assign a valid path to `data` to provide a JSON file that contains the animation as input. The file should be stored in the `static` folder, or in one of its subfolders.

```markdown
{{< animation id="gatin-default" animation-data="animation/gatin.json" class="col-6 mx-auto" >}}
```

### Animation on hover

Set `auto` to false and `hover` to true to trigger the animation when hovering the mouse over it.

```markdown
{{< animation id="gatin-auto" animation-data="animation/gatin.json" autoplay=false hover=true class="col-6 mx-auto" >}}
```

## Configuration

The [Lottie module](https://github.com/gethinode/mod-lottie) uses [Lottie Light](https://github.com/airbnb/lottie-web/wiki/Lottie-Light) by default. The `lottie_light.js` player is a lighter version of Lottie that supports the svg renderer only and does not support expressions or effects. Canvas and html renderers are not supported either.

You can adjust the mount point in `config.toml` to use the default library instead. Please note that this requires enabling `unsafe-eval` in your [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) (see Lottie [issue #2173](https://github.com/airbnb/lottie-web/issues/2173)).

```toml
[[module.imports.mounts]]
source = "build/player/lottie.js"
target = "assets/js/modules/lottie/lottie.js"
```

## Arguments

The shortcode supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `animation-data` | string |  |  | Path of the JSON file that contains the animation, relative to the static folder. |
| `autoplay` | bool |  |  | Flag indicating the animation or video should start playing immediately when loaded, if supported by the browser. Any audio will be muted. |
| `class` | string |  |  | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. |
| `hover` | bool |  |  | Flag to indicate the animation should start playing when hovering the mouse over it. |
| `id` | string |  |  | Unique identifier of the current element. |
| `label` | string |  |  | Assistive label of the element. |
| `loop` | bool |  | `true` | Flag to indicate the animation should play in a loop. |
| `mode` | bool |  |  | Flag indicating if the media asset should support color modes. If set, the element searches for images having a matching color-mode suffix such as `-light` or `-dark`. |