I have a view (tribeProduct) that generates a list of surfaces that are contained in a scroll view, what I want to do is a create an event that when the view is "dragged" down, an animation comes into play. The following is what I have so far that for some reason isn't working.
for (var t = 0; t < tribesLength; t++) {
var tribe = new TribesView({tribes: tribes, tribe: t});
if(tribes[t]['notifications'] > 0) {
// Create view with list of surfaces contained in a scroll view
var tribeProduct = new ProductView({tribes: tribes, tribe: t});
var productModifier = new Modifier({
opacity: 0,
transform: Transform.translate(window.innerWidth * 1, 0, 100)
});
productContext.add(productModifier).add(tribeProduct);
tribe.on('click', function(e) {
var tribeProduct = this[0];
var productModifier = this[1];
productModifier.setOpacity(1, { duration: 500 });
productModifier.setTransform(Transform.translate(0, 0, 100), { duration: 500, curve: Easing.inOutBack });
var handleSwipe = new GenericSync(
['mouse', 'touch'],
{ direction: GenericSync.DIRECTION_Y }
);
tribeProduct.pipe(handleSwipe);
handleSwipe.on('end', (function(data) {
console.log('test');
var position = data.position;
var startPos = 100;
if(position > startPos) {
this
.setOpacity(
0, { duration: 500, curve: 'easeInOut' }
)
.setTransform(
Transform.translate(0, startPos + 200, 0), { duration: 500, curve: 'easeInOut' }
);
}
console.log(position);
}).bind(productModifier));
}.bind([tribeProduct, productModifier]));
}
tribe.pipe(scrollView);
surfaces.push(tribe);
}
