Introducing H5P.Animator: Create straightforward animations in your browser

Oh, it has been quite a while since I released a new content type, hasn’t it? The wait is over! The HAW Hamburg as part of the Hamburg Open Online University wished for a tool that you can use to create straightforward animations – not competing with highly sophisticated tools such as Blender or After Effects, but rather on the level of what many people do with PowerPoint. And it should, of course, be based on H5P 🙂 Well, here comes H5P.Animator!

This is just a simple demo, yet already showing you what it can do. In the visual editor, you can:

  • Define the aspect ratio.
  • Set up a background color or background image.
  • Add background music.
  • Add elements such as texts, images, shapes and even videos (why not? :-)) and arrange them as required.
  • Assign animations to the elements.
  • Zoom in and out of the canvas.
  • Preview your animation.
  • Tweak the player experience.

The result will not be a static video, but an animation that is computed and displayed directly in your browser.

Creating this content type also covered creating an introductory tutorial for H5P.Animator and a user manual for the H5P.Animator player and a user manual for the H5P.Animator editor, so don’t be shy to have a look if you get stuck somewhere.

Want to use it already?

The H5P core team has been asked to review the content type, and when they find time , they should release it on the H5P Hub.

If you want to use the content type right away, look for the Reuse button underneath the content. Use that button to download the demo content, and then upload the .h5p file onto your H5P enabled platform. Please note that you will need to have permission to install H5P libraries. Otherwise, you cannot install the content type this way. In that case, your system admin will need to assist you.

Please note: Lumi seems to have trouble running the editor nicely. It seems to be related to the old CKEditor that is not shipped with H5P anymore, but Lumi still uses – Lumi has not been updated in over two years. The CKEditor crashes, but the reason is unclear so far. 

The source code is available as well, if you want to check it before installing or if you want to build the libraries yourself:

Also, the documentation including the tutorial and the user manual are openly available on github. You are more than welcome to improve the documentation, add translations, etc. Just create a pull request at https://github.com/otacke/h5p-animator-docs.

Is it available in my language?

In theory: yes! If it’s missing, you can fill in the gaps yourself on translate-h5p.tk.

Any future plans for that content type?

Yes. One thing that will be supported as soon as the underlying library allows easily is to allow combining different animations, so a text can fly-in and rotate at the same time. That is supposed to be possible early next year.

Also, it was great if one could export the animation to a static video file. To do this properly, a service/server-side component would be required, and that is something that H5P currently does not allow.

It was also nice if one could split the animation into multiple scenes that could be created and modified separately.

I know you want to share your ideas, too. Please keep in mind though, that I was merely the contractor! I do not have the intention to develop it further in my spare time beyond fixing hidden bugs or general maintenance.