Animation
Use the animation shortcode to show an After Effects animation.
Use the animation shortcode to show an After Effects animation, powered by 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. As an example, the following shortcode shows an animation that plays when hovering the mouse over it.
{{< animation data="animation/gatin.json" auto=false hover=true class="col-6 mx-auto" >}}The shortcode supports the following arguments:
| Argument | Required | Description |
|---|---|---|
| id | No | Optional unique id of the animation element, e.g. lottie-animation-1. |
| class | No | Optional class attribute of the container element. |
| data | Yes | Required path of the JSON file that contains the animation, relative to the static folder. |
| loop | No | Flag to indicate the animation should play in a loop, defaults to true. |
| auto | No | Flag to indicate the animation should start playing automatically, defaults to true. |
| hover | No | Flag to indicate the animation should start playing when hovering the mouse over it, defaults to false. |
| title | No | Optional accessible animation title. |
By default, animation support is optional. Be sure to include lottie in your module configuration and page frontmatter as needed.
Change the behavior of your animation with shortcode arguments.
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.
{{< animation data="animation/gatin.json" class="col-6 mx-auto" >}}Set auto to false and hover to true to trigger the animation when hovering the mouse over it.
{{< animation data="animation/gatin.json" auto=false hover=true class="col-6 mx-auto" >}}Assign a specific identified to the animation by setting the id argument. The following example assigns the id gatin-animation to the animation.
{{< animation id="gatin-animation" data="animation/gatin.json" class="col-6 mx-auto" >}}