Adding HTML5 animations to your education content is an awesome way to demonstrate how things work. Using Adobe After Effects and some clever JavaScript it is now possible.

This may be a customised alternative to H5P.

How did we do it? 

Step 1: Create a basic animation in After Effects. 

Actually, what I did was use a design created in Illustrator as a vector image. Then import the vector image into After Effects. From after effects, I then animated the objects. 

Step 2: Exported the animation using an Adobe After effects extension called BodyMovin.  https://exchange.adobe.com/creativecloud.details.12557.bodymovin.html

Step 3: Copy the exported data file to a server aong with the Javascript player that is used to play the animation. 

Step 4: Embed the animation in a Moodle page using JavaScript. 

Step 5: Add additional JavaScript to add extra functions to the animation. 

Result: You can embed the animation in a Moodle page and you can change the animation speed. I also added the ability to hide objects in the animation. 

Note: To hide a component I had to modify the original Player Javascript to add ID tags to the models. 

What you will need

Code to go into Moodle page.


<script src="https://ricoshae.com.au/animationdata/lottie2.js">
// this is the javascript player file
</script>
<script>
  // the path file called data2.json is the animation data.
    window.onload = function(e) {
        var animation = bodymovin.loadAnimation({
            container: document.getElementById('bm'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: 'https://ricoshae.com.au/animationdata/data2.json'
        })
        animation.setSpeed(2);
        animation.onEnterFrame = function(e) {

            if (e.currentTime > 10 && e.currentTime < 11) {
                console.log('frame 10');
                console.log(e.currentTime);
            };

        };
// everything below here is custom controling the animation      
document.getElementById("speed1").addEventListener("click", function() {
            animation.setSpeed(5);
        });
        document.getElementById("speedhalf").addEventListener("click", function() {
            animation.setSpeed(2);
        });
        document.getElementById("speedfast").addEventListener("click", function() {
            animation.setSpeed(10);
        });
        document.getElementById("pistonbtn").addEventListener("click", function() {
            var obj = document.getElementById("piston");
            if (obj.style.display == "none") {
                obj.style.display = "";
            } else {
                obj.style.display = "none";
            }
        });
    }
</script>

<div id="bm"> </div>
<button class="btn btn-secondary" id="speed1">Normal</button>
<button class="btn btn-secondary" id="speedhalf">Slow</button>
<button class="btn btn-secondary" id="speedfast">Fast</button>
<button class="btn btn-secondary" id="pistonbtn">Hide/Show piston</button>