Lottie embedded in WordPress

Hi, I’ve searched everywhere, including the Issues section here in GitHub. I can’t find the way to display a lottie animation in my WordPress site.

I’ve uploaded both .js files (lottie.js and the animation initializer .js file) as well as data.json.

anim-init.js var animation = lottie.loadAnimation({ container: document.getElementById('bm'), renderer: 'svg', loop: true, autoplay: true, path: 'https://seguramente.com.ar/wp-content/uploads/2017/12/logo-animation.json' })

Then, on my index page, I wrote this

<div id="bm"></div> <script src="https://seguramente.com.ar/wp-content/uploads/2017/12/lottie.js"></script> <script src="https://seguramente.com.ar/wp-content/uploads/2017/12/anim-init.js"></script>

I styled the div#bm like this #bm { background-color: gray; width: 100%; height: 50vh; }

I also added this to functions.php, so I could import .js and .json files function my_myme_types($mime_types){ $mime_types['json'] = 'json'; //Adding json extension $mime_types['js'] = 'js'; //Adding js extension return $mime_types; } add_filter('upload_mimes', 'my_myme_types', 1, 1);

This works perfectly fine on a blank .html document done locally. But when doing it in Wordpress, nothing happens. The div#bm with it’s corresponding CSS works fine. But no animation is shown.

Thanks by forehand.

[Nessjk]

Hey Brundea!

You are concatenating where you don’t need to concatenate…as you are giving the full http address. Try wp_enqueue_script( 'lottie', 'https://seguramente.com.ar/wp-content/scripts/lottie.js' );

Try that and let me know

[AdrienAlva]

@Nessjk that’s awesome! Glad to see you got it working, and thanks for the explanation.

All the files were uploaded by FTP. Here’s how my code ended up being.

Added to functions.php

wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', "https://code.jquery.com/jquery-3.1.1.min.js", array(), '3.1.1' );
wp_enqueue_script( 'lottie', 'https://seguramente.com.ar/wp-content/scripts/lottie.js', array( 'jquery' ) );
wp_enqueue_script( 'anim-init', 'https://seguramente.com.ar/wp-content/scripts/anim-init.js', array(), 1.1 );

I deregistered jquery because on the www.lottiefiles.com site, when you preview an animation, you can copy the iframe code and paste it into your site. I did this, and found out that they use jquery 3.1.1. Probably this step isn’t necessary, but I don’t have time right now to check if it also works with the core jquery that Wordpress uses.

anim-init.js

$(document).ready(function(){
	var animData = {
		container: document.getElementById('bm'),
		renderer: 'svg',
		loop: true,
		autoplay: true,
		path: "https://seguramente.com.ar/wp-content/scripts/logo-animation.json"
	};
	var anim = lottie.loadAnimation(animData);
});

logo-animation.json is the animation exported from After Effects. Then of course, on the home page of my site I simply created a div#bm as container for the animation. Styled it a bit with CSS and that was it.

Thank you for all the help guys!

Adding ‘wp-content’ to my path was the solution for me while working with localhost.

path: 'http://localhost/root-directory/wp-content/themes/theme-name/data.json'