Famo.us: How can I programmatically animate the position of a Scrollview?

Question

I can directly set the position with myScrollview.setPosition(y), or apply a motion manually with myScrollview.setVelocity(delta). However, is there a way to apply a smooth, precise easing transition to the position of a Scrollview? Thanks!

Answer 1

Alternatively you can use the FlexScrollView which uses a physics spring to smoothly pull the scroll-position to the new position. It also has an extended API for setting the scroll position:

https://github.com/IjzerenHein/famous-flex/blob/master/docs/FlexScrollView.md https://github.com/IjzerenHein/famous-flex/blob/master/docs/ScrollController.md https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md https://github.com/IjzerenHein/famous-flex

Answer 2

Here's what I settled on (there's probably a better way to do this):

var self = this; // current view object
var transitionTime = 500; //ms

// How far do we need to move every 16.67 ms (1/60th of a second)?
self.animatedScrollDelta = (self.myScrollview.getPosition() / (transitionTime / 16.6667));
self.animatedScroller = Timer.every(animateScrollerCallback, 1);

function animateScrollerCallback()
{
    var pos = self.myScrollview.getPosition() - self.animatedScrollDelta;
    self.myScrollview.setPosition(Math.max(0, pos));

    if(pos < 0)
        Timer.clear(self.animatedScroller);     
}

Note: This animates linearly, which was what I needed. I'm sure other easing formulas could be implemented using a TweenTransition.