Demo - Unroll Box

Code

jBone.addBone({ name: 'wallA', selectorId: 'boxDemo', length: 100, thickness: 1 })
     .addContent({ name: 'wallBlue', type: 'image', content: './box-tri-blue.png', pivot: jBone.Point(0.5, 50.5) })
     .addChildBone({ name: 'wallB', angle: 90, length: 100, thickness: 1 })
        .addContent({ name: 'wallGreen', type: 'image', content: './box-tri-green.png', pivot: jBone.Point(0.5, 50.5) })
        .addChildBone({ name: 'wallC', angle: 90, length: 100, thickness: 1 })
           .addContent({ name: 'wallRed', type: 'image', content: './box-tri-red.png', pivot: jBone.Point(0.5, 50.5) })
           .addChildBone({ name: 'wallD', angle: 90, length: 100, thickness: 1 })
              .addContent({ name: 'wallWhite', type: 'image', content: './box-tri-white.png', pivot: jBone.Point(0.5, 50.5) });

jBone.addAnimation({ name: 'unroll', frames: 25, duration: 10000, looped: true })
        .at(5)
           .rotate('wallB', 0)
           .rotate('wallC', 0)
           .rotate('wallD', 0)
        .at(6)
           .rotate('wallB', -90)
           .rotate('wallC', 0)
           .rotate('wallD', 0)
        .at(7)
           .rotate('wallB', -90)
           .rotate('wallC', -90)
           .rotate('wallD', 0)
        .at(8)
           .rotate('wallB', -90)
           .rotate('wallC', -90)
           .rotate('wallD', -90)
        .at(9)
           .rotate('wallB', -90)
           .rotate('wallC', -90)
           .rotate('wallD', -180)
        .at(10)
           .rotate('wallB', -90)
           .rotate('wallC', -180)
           .rotate('wallD', -180)
        .at(11)
           .rotate('wallB', -180)
           .rotate('wallC', -180)
           .rotate('wallD', -180)
        .at(12)
           .rotate('wallA', 0)
        .at(15)
           .rotate('wallA', -270);

jBone.render();