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