Open curtain animation on a famo.us Scrollview - animation

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?

Answer 1

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>