Lottie Card is a custom Lovelace card for Home Assistant that allows you to display Lottie animations in your dashboards. Bring your Home Assistant interface to life with dynamic and interactive animations!
- Supports rendering Lottie animations.
- Customizable background colors.
- Adjustable animation size (e.g.,
size: 150px). - Additional options for animation control:
loop: Repeat the animation.autoplay: Automatically start the animation.direction: Set the direction of the animation (1 for forward, -1 for reverse).
- Easy to configure and integrate.
- Open HACS in your Home Assistant instance.
- Navigate to Frontend > Custom Repositories.
- Add this repository:
https://github.com/fastender/lottie-card. - Select "Lovelace" or "Dashboard" as category
- Click "Install"
-
Download the
lottie-card.jsfile from this repository. -
Copy the file to the
wwwfolder in your Home Assistant configuration directory. -
Add the following entry to your
configuration.yaml:resources: - url: /local/lottie-card.js type: module
-
Restart Home Assistant.
Add the card to your Lovelace dashboard. Here's an example:
type: custom:lottie-card
animation: /local/animations/example.json
background_color: "#ffffff"
size: 150px
loop: true
autoplay: true
direction: 1| Option | Description | Default Value |
|---|---|---|
animation |
Path to the Lottie animation file | Required |
background_color |
Background color of the card (hex) | transparent |
size |
Size of the animation (e.g., 150px) |
100% |
loop |
Enable/disable looping of the animation | false |
autoplay |
Automatically start the animation | false |
direction |
Direction of the animation (1 or -1) | 1 |
Here’s a sample configuration:
type: custom:lottie-card
animation: /local/animations/loader.json
background_color: "#f0f0f0"
size: 200px
loop: true
autoplay: true
direction: -1Below is a demonstration of the Lottie Card in action:
This project is licensed under the GNU General Public License.
If you have questions or want to report an issue, please open an issue on GitHub.