Partial Component
Lottie
The Lottie partial integrates Lottie animations into components. It loads the Lottie player library and creates an animation player with configurable settings for speed, looping, and autoplay.
Manifest
{
"name": "lottie",
"type": "_partials",
"styles": ["lottie.css"],
"scripts": [],
"requires": []
}
Configuration
lottie:
src: '/assets/lotties/example4.json'
speed: 1
control:
autoplay: true
loop: true
Configuration Options
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
src | string | Yes | - | Path to Lottie JSON file |
speed | number | No | 1 | Animation playback speed |
control.autoplay | boolean | No | false | Start playing automatically |
control.loop | boolean | No | false | Loop the animation |
Example
Usage in Templates
{% from "components/_partials/lottie/lottie.njk" import lottie %}
{{ lottie(section.lottie) }}
Notes
- Loads Lottie player from CDN
- Speed, loop, and autoplay configuration
- Uses the modern lottie-player web component