Bodymovin Animation in H5P

benjaminwhite's picture

Hi. I'd like to add Bodymovin animation inside of H5P Course Presentation. I've added an example here where I've place the animation on a wordpress site. This was pretty simple, but I'm unsure of the best way to incorporate this into your plugin. 

If it helps, here are the steps that I used to add bodymovin to wordpress.

Insert this code into functions.php of your child theme to allow for uploading the js and json files into the wp-content/uploads directory.

 

function my_myme_types($mime_types){
$mime_types['json'] = 'json';
$mime_types['js'] = 'js';
return $mime_types;
}
add_filter('upload_mimes', 'my_myme_types', 1, 1);

 

In your Javascript file (e.g. "bodymovin.js"). Go to var params = { . Here, delete the line animationData: animationData. We will replace it: Before the closing brace, add two new parameters. path for the url to the *.json file and assetsPath for the images, if you need them. Images are usually unnecessary. The code should look similar to this:

 

var params = {
container: document.getElementById('lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
path: '/wp-content/uploads/data.json',
assetsPath: '/wp-content/uploads/'
}; 

 

Change "lottie" to whatever id you want.

 

Place your Bodymovin <div>-tag

 

<div id = "lottie"></div>

 

anywhere you like. Change "lottie" to whatever id you want. Make sure it's the same as in your Javascript file container: document.getElementById('lottie').

The last step is to reference to your uploaded Javascript file. I did this in the "footer.php" right above the closing body tag </body>. Add this line:

 

<script src="/wp-content/uploads/bodymovin.js" type="text/javascript"></script>
Content types: 
icc's picture

Thank you for sharing. I have not seen anyone else using this with H5P, yet.

I believe you could also place the JS in your theme and use the h5p_alter_library_scripts action to load it.

stopbit's picture

Looks  impressive!

A nice find - I may look into this myself (when I have time) as one thing missing from H5P is annimation effects.