Animation

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.

Add the following configuration to your page’s frontmatter to enable Lottie animations:

---
modules: ["lottie"]
---

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

Configuration

The Lottie module uses Lottie Light by default. The lottie_light.js player is a lighter version of Lottie that supports the svg renderer only and does not support expressions or effects. Canvas and html renderers are not supported either.

You can adjust the mount point in config.toml to use the default library instead. Please note that this requires enabling unsafe-eval in your Content Security Policy (see Lottie issue #2173 ).

[[module.imports.mounts]]
source = "build/player/lottie.js"
target = "assets/js/modules/lottie/lottie.js"

Arguments

The shortcode supports the following arguments:

Name	Type	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 element 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	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 element searches for images having a matching color-mode suffix such as `-light` or `-dark`.
title	string
v1.0.0 Use `label` instead. Accessibility title.

On this page

Docs