# Are you using Lottie animations?

**URL:** <https://forum.bricksbuilder.io/t/are-you-using-lottie-animations/1077>\
**Category:** How To\
**Created:** [October 5, 2021, 1:05am UTC](https://forum.bricksbuilder.io/t/are-you-using-lottie-animations/1077 "2021-10-05T01:05:18Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wabbit](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/wabbit/32/8088_2.png) [@Wabbit](https://forum.bricksbuilder.io/u/Wabbit)\
**Post date:** [October 5, 2021, 1:05am UTC](https://forum.bricksbuilder.io/t/are-you-using-lottie-animations/1077/1 "2021-10-05T01:05:18Z")

</div>

I’m trying to bring some JSON lottie animations into my bricks layout (without using a plugin), has anyone tried something similar?

Naturally, I’ll keep doing my own research on how to best implement these, but I’d appreciate some input from the community, maybe you figured it out already? 😄

---

<div class="post-metadata">

**Author:** ![barnez](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/barnez/32/753_2.png) [@barnez](https://forum.bricksbuilder.io/u/barnez)\
**Post date:** [October 20, 2021, 6:09pm UTC](https://forum.bricksbuilder.io/t/are-you-using-lottie-animations/1077/2 "2021-10-20T18:09:29Z")

</div>

Have a look at this plugin: [Bricksable for Bricks Builder – WordPress plugin | WordPress.org](https://wordpress.org/plugins/bricksable/)

> Lottie – Bricksable will allow you to harness the power of Lottie to add interactive vector animations to your websites. Lightweight JSON files provide high performance, quality and efficiency to keep your site loading and running fast. Impressive animations will engage more customers and boost conversation rates.

---

<div class="post-metadata">

**Author:** ![barnez](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/barnez/32/753_2.png) [@barnez](https://forum.bricksbuilder.io/u/barnez)\
**Post date:** [October 20, 2021, 7:09pm UTC](https://forum.bricksbuilder.io/t/are-you-using-lottie-animations/1077/3 "2021-10-20T19:09:42Z")

</div>

Sorry, just noticed the requirement for a non-plugin solution. Maybe the plugin code can shine a light on what is required.

---

<div class="post-metadata">

**Author:** ![Ylder](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/y/bc8723/32.png) [@Ylder](https://forum.bricksbuilder.io/u/Ylder)\
**Post date:** [August 23, 2022, 3:44am UTC](https://forum.bricksbuilder.io/t/are-you-using-lottie-animations/1077/4 "2022-08-23T03:44:10Z")

</div>

did you get it? Actually I’m trying the same

---

<div class="post-metadata">

**Author:** ![Tom](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/t/3d9bf3/32.png) [@Tom](https://forum.bricksbuilder.io/u/Tom)\
**Post date:** [September 9, 2022, 11:09am UTC](https://forum.bricksbuilder.io/t/are-you-using-lottie-animations/1077/5 "2022-09-09T11:09:46Z")

</div>

Go to the Lottie Files website and then click on the code menu and choose web player

> **[Lottie Web Player - Lottiefiles](https://lottiefiles.com/web-player)**
>
> A powerful web player for Wordpress, Shopify, Webflow, Squarespace, Wix or any Website. Implement Lottie animations on a website in just a few clicks.

From there you can customize the layout of the animation and take the code snippet and paste it into a code block from Bricks.

I also self hosted the lottie animation file as well at my own website.

---

<div class="post-metadata">

**Author:** ![Laidbackluke](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/laidbackluke/32/5885_2.png) [@Laidbackluke](https://forum.bricksbuilder.io/u/Laidbackluke)\
**Post date:** [June 15, 2023, 10:06pm UTC](https://forum.bricksbuilder.io/t/are-you-using-lottie-animations/1077/6 "2023-06-15T22:06:15Z")

</div>

Hey @Tom,

how do you self host animated Lotties?

---

<div class="post-metadata">

**Author:** ![Tom](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/t/3d9bf3/32.png) [@Tom](https://forum.bricksbuilder.io/u/Tom)\
**Post date:** [June 16, 2023, 11:01am UTC](https://forum.bricksbuilder.io/t/are-you-using-lottie-animations/1077/7 "2023-06-16T11:01:51Z")

</div>

It is uploaded to the Media Gallery. To do that you would have to enable json uploads with a code snippet.

```auto
<?php
/**
* Allow additional MIME types
* Use 'text/plain' instead of 'application/json' for JSON because of a current Wordpress core bug
*/

function ess_add_upload_mimes( $types ) {
$mimes['svg'] = 'image/svg+xml';
$types['json'] = 'text/plain';
return $types;
}
add_filter( 'upload_mimes', 'ess_add_upload_mimes' );

```

I also use BricksExtras now since it has a lottie element (but obviously the code from the lottie website still works fine).

---

<div class="post-metadata">

**Author:** ![Sergio](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/sergio/32/567_2.png) [@Sergio](https://forum.bricksbuilder.io/u/Sergio)\
**Post date:** [November 22, 2023, 12:58am UTC](https://forum.bricksbuilder.io/t/are-you-using-lottie-animations/1077/8 "2023-11-22T00:58:03Z")

</div>

Try this:

> **[How to add Lottie to Bricks builder - Step by step guide \[Video included\]](https://creattie.com/blog/how-to-use-lottie-animations-with-bricks-builder)**
>
> Learn how to seamlessly integrate Lottie animations with Bricks Builder. Our step-by-step tutorial guides you through the whole process.
> Uncover the advantages of incorporating Lottie in web development!

---

<div class="post-metadata">

**Author:** ![sinanisler](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/sinanisler/32/34468_2.png) [@sinanisler](https://forum.bricksbuilder.io/u/sinanisler)\
**Post date:** [May 27, 2025, 3:55pm UTC](https://forum.bricksbuilder.io/t/are-you-using-lottie-animations/1077/9 "2025-05-27T15:55:58Z")

</div>

if anyone looks for it

Bricks Lottie Element;

> **[SNN-BRX - Bricks Builder Pro Child Theme, Agency and Client Theme | Sinan...](https://sinanisler.com/snn-brx/#lottie-element)**
>
> SNN-BRX Child theme is designed to give you advanced features and tools for building sites with Bricks Builder.
> Everything is straightforward and ready to use.

tutorial;

[![](https://img.youtube.com/vi/H2QfdxQmvyw/maxresdefault.jpg "Lottie Element, SVG Animation with WordPress Bricks Builder, EASY !") ](https://www.youtube.com/watch?v=H2QfdxQmvyw)