Bodymovin Animation in H5P
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>
icc
Mon, 12/17/2018 - 09:18
Permalink
Thank you for sharing. I have
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
Wed, 05/01/2019 - 12:59
Permalink
Nice Find!
Looks impressive!
A nice find - I may look into this myself (when I have time) as one thing missing from H5P is annimation effects.