This tutorial will show you can use the animera.js library to easily animate or populate html objects based on sensor values from a mqtt broker.

First you need to add the animera.js library to the head of your html file:

   <script src="" data-autobind=""></script>

   <!-- your content -->


bindTopicToHtml This example shows how to display data inside an object. In this case it is a Json string from the mqtt broker with topic: "test/signalA". This topic will also be used in the examples below.

Copy paste this code between the tags <body> and </body>.

<div id="dataDiv1" style="transform-origin: center; background-color: rgba(255,245,0,1); height:160px; width:200px; padding:20px; float:left; margin-right:30px; font-size:12px;" animera="bindTopicToHtml?topic=test/signalA"></div>

This example is pretty straight forward and simply displays the payload from a subscribed mqtt topic defined in the topic=test/signalA parameter.

bindTopicToRotation - Rotation speed. The example shows you how to use animera.js to control the rotation speed of an object. In this case a simple div with with border-radius and background-color styling.

Copy paste the code below into your html file between the tags <body> and </body>.

<div id="spinDiv1" style="transform-origin: center; background-color:rgba(0,169,157,1); height:100px; width:100px; margin:20px;border-radius: 50px; border-top-left-radius:0px; float:left; margin-right:40px;" animera="bindTopicToRotation?inputRange=[0,2500];outputRange=[0,0.5];relative=true;clamp=true;topic=test/signalA;subproperty=power"></div>

The parameter to pay attention to here is the animera inside the div. The others are just normal style parameters in html. With the transform-origin you can decide from which origin the transform is applied. You can read more about possible property values over at


The string begins by declearing what kind of function we would like to run on the object. List of available functions within the animera.js library:

  • bindTopicToRotation
  • bindTopicToHtml
  • bindTopicToStyle
  • bindTopicToCallback

inputRange Defines the max and min value for the sensor value. This is used for mapping the signal into a rotation speed or a angle in this bindTopicToRotation example. inputRange=[0,2500]
outputRange Defines the max and min value for the output. Meaning which angle or rotation speed is the inputRange mapped to. outputRange=[0,0.5].
relative Defines if the rotation is continuous or static. In other words is it a rotation speed or a rotation angle of the object. relative=true means it is a rotation speed.
topic Defines which topic to subscribe to in the mqtt broker. topic=test/signalA
subproperty Defines which of the properties value it should use to transform the object. subproperty=power

bindTopicToRotation - Rotation angle This example shows you how to change the rotation angle of an object.

Again copy paste the code below into your html file between the tags <body> and </body>.
<div id="spinDiv2" style="transform-origin: center; transition: all 0.5s ease;background-color:rgba(41,171,226,1); height:100px; width:100px; margin:20px; border-radius:50px; border-top-left-radius:0px; float:left; margin-right:40px;" animera="bindTopicToRotation?inputRange=[0,2500];outputRange=[0,180];relative=false;clamp=true;topic=test/signalA;subproperty=power"><div>

The only difference from the bindTopicToRotation - Rotation speed are these parameter values relative=false and outputRange=[0,180]. outputRange defines what kind of angle range the rotation should be restricted to.