Open curtain animation on a famo.us Scrollview

Question

I'm trying to create an open curtain animation on a Scrollview, so when an item in a Scrollview is clicked, it and item to its left move left, and all items after it move to the right. when the item is clicked again, the curtain closes. Thinking of doing it by moving items out from the Scrollview to 2 SequentialLayouts and once the curtain closes, move them back into the Scollview. Can this be done? Can you move nodes / views around in the render tree from one node to another?

Any other design approaches I should consider?

You can use transitions on your `views` within the scrollview to transition based on the state of the item. If I get time, I will create an example. Any reason you want to use scrollview? Do you have so many items that there may be a reason to have to scroll? These are things to consider. — talves, Mar 22 '15 at 18:52
Hey talves, yes, I have sufficiently enough items that require a scoll and I don't want to manage all the scroll / swap left / right events myself. Regarding transitions, yes, I've tried that but the close curtain is currently messed up - the animation doesn't start from where I moved the items to. Any clues? — Ronen Babayoff, Mar 22 '15 at 19:06
If you can supply code, maybe in your question, I could look at what you are doing. — talves, Mar 22 '15 at 19:46
@talves, found a solution that works. I have a state modifier as the main node in my item view. When opening the curtain, I'm calling it's setTransform with Transform.translate(distanceToLeftOrRight, 0, 0). When closing the curtain, I'm calling it with Transform.translate(0, 0, 0) and it magically works, including the curtain close animation. — Ronen Babayoff, Mar 22 '15 at 22:03
Great to hear. FYI. `setTransform` is deprecated, so in production, you should use a `Transitionable` or `TransitionableTransform`. I made a curtain example from what we were discussing. — talves, Mar 23 '15 at 00:05

score 0 · Accepted Answer · answered Mar 23 '15 at 00:05

Here is my version of the curtains you described. It was hard to know exactly what you wanted, but I took a stab at it.

define('main', function(require, exports, module) {
  var Engine = require("famous/core/Engine");
  var Surface = require("famous/core/Surface");
  var RenderNode = require("famous/core/RenderNode");
  var Modifier = require("famous/core/Modifier");
  var Utility = require("famous/utilities/Utility");
  var Scrollview = require("famous/views/Scrollview");
  var Transitionable = require("famous/transitions/Transitionable");
  var SnapTransition = require("famous/transitions/SnapTransition");

  Transitionable.registerMethod('snap', SnapTransition);

  var snap = {
    method: 'snap',
    period: 600,
    dampingRatio: 0.6
  };

  var mainContext = Engine.createContext();

  var scrollview = new Scrollview({
    direction: Utility.Direction.X
  });

  var views = [];

  scrollview.sequenceFrom(views);

  function _resize(index, views, event) {
    console.log(index, event);
    var itsMe = (index === event.index);
    if (itsMe) {
      this.trans.halt();
      if (this.open)
        this.trans.set(100, snap);
      else
        this.trans.set(400, snap);
      this.open = !this.open;
      scrollview.goToPage(index);
    } else {
      if (event.isOpen) {
        this.trans.halt();
        this.trans.set(100, snap);
      } else {
        this.trans.halt();
        this.trans.set(20, snap);
      }
      this.open = false;
    }

  }

  function _resizeChosen(index, views, event) {
    scrollview._eventOutput.emit('itemChosen', {
      index: index,
      isOpen: views[index].surface.open
    });
  }

  function _surfaceSize() {
    return [this.trans.get(), undefined];
  }

  for (var i = 0; i < 20; i++) {

    var node = new RenderNode();

    node.surface = new Surface({
      content: (i + 1),
      size: [undefined, undefined],
      properties: {
        backgroundColor: "hsl(" + (i * 360 / 20) + ", 90%, 50%)",
        lineHeight: "50px",
        textAlign: "center"
      }
    });

    node.surface._index = i;

    node.surface.open = false;

    node.surface.state = new Modifier();

    node.surface.trans = new Transitionable(50);

    node.surface.state.sizeFrom(_surfaceSize.bind(node.surface));

    node.add(node.surface.state).add(node.surface);

    node.surface.pipe(scrollview);
    node.surface._eventOutput.subscribe(scrollview._eventOutput);

    node.surface.on('click', _resizeChosen.bind(node.surface, i, views));

    node.surface.on('itemChosen', _resize.bind(node.surface, i, views));

    views.push(node);
  }

  mainContext.add(scrollview);
});
require(['main']);

<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

Looks even better than mine :) Love the shrinking effect. Thanks! — Ronen Babayoff, Mar 26 '15 at 03:10
No Problem. The only issue was the page (index) placement of an item, but for most conditions it worked ok. Good Luck! — talves, Mar 26 '15 at 14:42

Open curtain animation on a famo.us Scrollview

1 Answers1