Distance between two surfaces when rotateY

Question

Code: http://jsfiddle.net/qhoc/8gg7gkqv/

I want the red surface sits flat on top of the gray surface. But you can see the distance (marked ??) between two surfaces when I rotate modifier1. How to get rid of this "gap"?

JS:

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var Modifier = Famous.Core.Modifier;
    var Transform = Famous.Core.Transform;
    var StateModifier = Famous.Modifiers.StateModifier;
    var Easing = Famous.Transitions.Easing;

    var mainContext = Engine.createContext();
    mainContext.setPerspective(1000);

    var modifier1 = new StateModifier({
      size: [200, 200],
      align: [0.5, 0.5],
      origin: [0.5, 0.5]
    });

    var surface1 = new Surface({
      properties: {
        background: 'gray'
      }
    });

    var modifier2 = new StateModifier({
      size: [50, 100],
      align: [0.5, 0.5],
      origin: [0.5, 0.5]
    });

    var surface2 = new Surface({
      properties: {
        background: 'red'
      }
    });

    var graphNode = mainContext.add(modifier1);
    graphNode.add(surface1);
    graphNode.add(modifier2).add(surface2);

    modifier1.setTransform(
      Transform.rotate(0, Math.PI/2.2, 0),
      { duration: 2000, curve: Easing.outElastic }
    );

    modifier2.setTransform(
      Transform.scale(1, 2, 1),
      { duration: 2000, curve: Easing.outElastic }
    );
});

Answer 1

Never seen this library but I think I fixed the problem correctly here, just the explanation may be lacking:

var graphNode = mainContext.add(modifier1);
graphNode.add(surface1);
1graphNode.add(modifier2).add(surface2);

Here you add one modifier on top of the other, so the origins stack. modifier1 is 0.5, 0.5 from the mainContext. But modifier2 has the same origin but it's applied relative to modifier1 which is where the extra distance comes from.

The solution is to set the origin of modifier2 to 0,0, or add it to mainContext. I think the former is what you want.

EDIT: fixed fiddle link