Can halt() stop the animation at the end state? - famo.us

Question

I want halt() my translate animation and have it instantly end up at its final location. halt() currently stops the animation where it currently is.
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [100, 100],
content: 'click me to halt',
properties: {
color: 'white',
textAlign: 'center',
backgroundColor: '#FA5C4F'
}
});
var stateModifier = new StateModifier({
origin: [0.5, 0]
});
mainContext.add(stateModifier).add(surface);
stateModifier.setTransform(
Transform.translate(0, 300, 0),
{ duration : 8000, curve: 'linear' }
);
surface.on('click', function() {
stateModifier.halt();
surface.setContent('halted');
});

Answer 1

Your solution does seem very hacky.. why don't you just apply the same transform without a transition..
surface.on('click', function() {
stateModifier.halt();
stateModifier.setTransform(Transform.translate(0, 300, 0));
surface.setContent('halted');
});
EDIT:
Even better you can just get the final transform directly..
surface.on('click', function() {
stateModifier.setTransform(stateModifier.getFinalTransform());
surface.setContent('halted');
});

Answer 2

I discovered a hack for this, at least for pre-0.2.0.
You can set the final state using Translate.set() using a very large number to force the last state of the animation.
It would be nice to see support for this somehow with halt() in future versions of Famo.us
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [100, 100],
content: 'click me to halt',
properties: {
color: 'white',
textAlign: 'center',
backgroundColor: '#FA5C4F'
}
});
var stateModifier = new StateModifier({
origin: [0.5, 0]
});
mainContext.add(stateModifier).add(surface);
stateModifier.setTransform(
Transform.translate(0, 300, 0),
{ duration : 8000, curve: 'linear' }
);
surface.on('click', function() {
// This forces the translate animation to its end state
var translate = stateModifier._transformState.translate;
translate.set(translate.get(Number.MAX_VALUE));
surface.setContent('halted');
});