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" >}}