---
title: "Lottie Animations Block"
source: "https://docs.nexcess.com/software/kadence/blocks/lottie-animation/"
description: "The Kadnece Lottie Animations Block lets you add lightweight, vector-based animations to your pages or posts. Lottie animations scale smoothly and load quickly,…"
vertical: "Software"
area: "Kadence Blocks"
date: "2022-07-01"
last_modified: "2026-07-02"
---

# Lottie Animations Block

The Kadnece **Lottie Animations Block** lets you add lightweight, vector-based animations to your pages or posts. Lottie animations scale smoothly and load quickly, helping you create engaging motion effects without slowing down your site.

- You can choose how the animation behaves. From playing automatically, triggers on scroll, looping continuously, and more..
- Add animations using a **remote URL** from platforms like LottieFiles, or upload your own **local JSON file** for full control over speed, hosting, and playback settings.

*Here’s an example of the Lottie Animations Block in action:*

For a complete walkthrough on downloading, uploading, and managing Lottie animations in Kadence Blocks, view the [Using GIFs and Lottie Animations with Kadence Blocks](https://docs.nexcess.com/software/kadence/gifs-and-lottie-animations/#using-lottie-animations-with-kadence) guide

Getting Started

To get started, ensure you have the Kadence Blocks Plugin installed and activated on the website. From the Block Editor, add a new Lottie Animations Block to the page.

![Add Lottie Animations Block](https://docs.nexcess.com/wp-content/uploads/2026/06/Add-Lottie-Animations-Block.jpg)

From here, you can use the Lottie Animations Block Settings to configure the Lottie Animation.

![Lottie Animations block settings](https://docs.nexcess.com/wp-content/uploads/2026/06/Lottie-Animations-block-settings-scaled-1.jpg)General Block Settings

The General Block Settings control the Lottie Animation Source File and controls.

Selecting a File Source

Choose where your animation file comes from:

**Remote URL** – Paste in a direct link from LottieFiles or another host. ([Learn more](https://docs.nexcess.com/software/kadence/gifs-and-lottie-animations/#generating-lottie-links).)

![Local URL](https://docs.nexcess.com/wp-content/uploads/2026/06/Local-URL.jpg)

**Local File** – Upload your own JSON animation file to host it directly on your website. ([Learn more](https://docs.nexcess.com/software/kadence/gifs-and-lottie-animations/#downloading-lottie-files).)

![Remote URL](https://docs.nexcess.com/wp-content/uploads/2026/06/Remote-URL.jpg)

Playback Settings

The Lottie Animations Block supports a variety of playback controls, allowing you to control how and when the animation plays:

- **Autoplay** – Automatically starts the animation when the page loads.
- **Only Play on Page Scroll** – Plays only while the visitor scrolls. 
    - Enables the selection of a Starting and Ending Frame.
    - *Note:* This option overrides most other playback settings, including autoplay, playback speed, bounce, loop, and play on hover. It also won’t function while previewing the animation inside the block editor; view it on the front end to see the effect in action.
- **Don’t Play Until In View** – Begins playback only when the animation becomes visible in the viewport.
- **Playback Speed** – Adjusts how fast or slow the animation plays.
- **Loop Playback** – Repeats the animation continuously.
- **Bounce Playback** – Plays forward and then reverses back to the start for a seamless looping effect.
- **Delay Between Loops** – Adds a delay (in seconds) between loop cycles.
- **Limit Number of Loops** – Restricts how many times the animation repeats (applies to both loop and bounce modes).

![Playback Block Settings](https://docs.nexcess.com/wp-content/uploads/2026/06/Playback-Block-Settings.jpg)

Advanced Block Settings

**Padding and Margin**: Add a padding and/or margin around the Lottie Animations Block.  
  
**Max Width**: Set a maximum width to prevent the animation from scaling too large on larger screens  
  
**Use Fixed Ratio:** Optionally enable the **Use fixed ratio (prevents layout shift)** setting to maintain a consistent aspect ratio during page load.  
*When **Use fixed ratio** is enabled, a **Size Ratio (%)** to control the proportional scaling of the animation container.*

**Block Defaults**: Use **Save as default** to set the current styling choices as the default for future Lottie Animations blocks. This will not affect existing blocks already placed on your site. ([Learn more](https://docs.nexcess.com/software/kadence/set-block-defaults/).)  
  
**Additional CSS Class(es)**: Add custom CSS classes for advanced styling or targeting via custom code.

![Advanced Block Settings](https://docs.nexcess.com/wp-content/uploads/2026/06/Advanced-Block-Settings.jpg)

Removing Self-Hosted Lottie JSON files

You can manage and delete your uploaded Lottie Animation files from the **Kadence Blocks → Settings → Manage Lottie Animations** page.  
  
This area is primarily for removing previously uploaded files. Uploading new animations is typically done directly from the block editor when adding or replacing a Lottie file.

![](https://docs.nexcess.com/wp-content/uploads/2026/06/Zight-Recording-2025-09-29-at-08.30.32-AM.gif)