Docs

Animation

Posted on January 2, 2024  (Last modified on June 20, 2025) • 3 min read • 598 words
Component  
Component  
Share via

Use the animation shortcode to show an After Effects animation.

Overview   Arguments   Configuration   Examples   Default Animation   Animation on Hover   Identification  

Overview  

Added in v0.20.4   

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.

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

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
animation-data string Path of the JSON file that contains the animation, relative to the static folder.
auto bool true v1.0.0      Use autoplay instead. Flag to indicate the animation should start playing automatically.
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.
data string v1.0.0      Use animation-data instead. Path of the JSON file that contains the animation, relative to the static folder.
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 elements searches for images having a matching color-mode suffix such as -light or -dark.
title string v1.0.0      Use label instead. Accessibility title.
Name Type Required Default
animation-data string
Path of the JSON file that contains the animation, relative to the static folder.
auto bool true
v1.0.0      Use autoplay instead. Flag to indicate the animation should start playing automatically.
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.
data string
v1.0.0      Use animation-data instead. Path of the JSON file that contains the animation, relative to the static folder.
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 elements searches for images having a matching color-mode suffix such as -light or -dark.
title string
v1.0.0      Use label instead. Accessibility title.

Configuration  

By default, animation support is optional. Be sure to include lottie in your Module Configuration and Page Frontmatter as needed.

Examples  

Change the behavior of your animation with shortcode arguments.

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 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 animation-data="animation/gatin.json" autoplay=false hover=true class="col-6 mx-auto" >}}

Identification  

Assign a specific identified to the animation by setting the id argument. The following example assigns the id gatin-animation to the animation.

markdown 
{{< animation id="gatin-animation" animation-data="animation/gatin.json" class="col-6 mx-auto" >}}
On this page: