Animation

Share via

Link copied to clipboard

Use the animation shortcode to show an After Effects animation.

Overview

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

Arguments

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.

Name	Type	Required	Default
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.

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

• Remove deprecated shortcode 'comment' (291614e)

On this page:

Docs

Overview

Arguments

Configuration

Examples

Default Animation

Animation on Hover

Identification