Are you using Lottie animations?

How To
1

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? :smile:

1 Like
2

Have a look at this plugin: Bricksable for Bricks Builder – WordPress plugin | WordPress.org

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.

3

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

4

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

5

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

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.

2 Likes
6

Hey @Tom,

how do you self host animated Lotties?

7

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

<?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).

8

Try this: