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:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| auto | bool | true | Flag to indicate the animation should start playing automatically. | |
| class | string | Class attribute of the container element. | ||
| data | string | yes | Path of the JSON file that contains the animation, relative to the static folder. | |
| hover | bool | false | Flag to indicate the animation should start playing when hovering the mouse over it. | |
| id | string | Unique identifier of the animation element, defaults to lottie-animation-n with a sequential number n. |
||
| loop | bool | true | Flag to indicate the animation should play in a loop. | |
| mode | bool | Flag indicating if the animation should support color modes. If set, the shortcode searches for data files that having a matching color-mode suffix such as -light or -dark. |
||
| title | string | Accessibility 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" >}}