famou.us surface slide in from left on click

Question

I am noob with famo.us. I would like to load a surface 'onclick' with a slide in from left animation

My current action is using

image1.on('touchstart', function() {
    var st = new Modifier();
    st.setTransform(
        Transform.translate(100, 300, 0),
        { duration : 1000, curve: 'easeInOut' }
    );
    var appView = new AppView();
    mainContext.add(st).add(appView);
});

This slides the surface from the top to the specified location. But my surface has to slide from outside to the view. Also I would like to slide the surface out and get the previous surface back. How do I do this? any samples would also be ok.

Answer 1

There are a lot of options, but I will provide two ways it can be done. I have changed the touchstart just for the examples.

Option 1: Start your transform from the correct initial transform position and change images. (Beginner)

Example 1: jsBin here

  var image1 = new ImageSurface({ 
    size: [undefined, 300],
    content: 'http://i.imgur.com/UQWUJPr.jpg?1'
  });
  var image2 = new ImageSurface({ 
    size: [undefined, 300],
    content: 'https://i.imgur.com/nC0i0r2.jpg?1'
  });

  var trans1 = new TransitionableTransform(Transform.translate(100, 200 ,0));
  var mod1 = new Modifier({
    transform: trans1
  });

  var trans2 = new TransitionableTransform(Transform.translate(-1000, 200 ,0));
  var mod2 = new Modifier({
    transform: trans2
  });

  mainContext.add(mod1).add(image1);
  mainContext.add(mod2).add(image2);

  image1.on('click', function() {
    trans1.set(
        Transform.translate(-1000, 200, 0),
        { duration : 1000, curve: 'easeInOut' }
    );
    trans2.set(
        Transform.translate(100, 200, 0),
        { duration : 1000, curve: 'easeInOut' }
    );
  });

  image2.on('click', function() {
    trans1.set(
        Transform.translate(100, 200, 0),
        { duration : 1000, curve: 'easeInOut' }
    );
    trans2.set(
        Transform.translate(-1000, 200, 0),
        { duration : 1000, curve: 'easeInOut' }
    );
  });

Option 2: Use the EdgeSwapper and modify the controller. (Advanced)

Example 2: jsBin here

  var image1 = new ImageSurface({ 
    size: [undefined, 300],
    content: 'http://i.imgur.com/UQWUJPr.jpg?1'
  });
  var image2 = new ImageSurface({ 
    size: [undefined, 300],
    content: 'https://i.imgur.com/nC0i0r2.jpg?1'
  });

  var swapper = new EdgeSwapper();
  function _transformMapLeft(zMax, progress) {
    return Transform.translate(-this._size[1] * (1 - progress), 0, zMax * (1 - progress));
  }

  swapper._controller.inTransformFrom(
       CachedMap.create(_transformMapLeft.bind(swapper, 0.0001)));

  swapper._controller.outTransformFrom(
          CachedMap.create(_transformMapLeft.bind(swapper, -0.0001)));

  var mod = new Modifier({
    transform: Transform.translate(100,100,0)
  });

  mainContext.add(mod).add(swapper);
  swapper.show(image1);

  image1.on('click', function() {
    swapper.show(image2);
  }.bind(this));
  image2.on('click', function() {
    swapper.show(image1);
  }.bind(this));