Why do we need transitionableTransform class in famo.us? - famo.us

Question

Why do we need transitionableTransform class in famo.us if we simply can set transforms and transitions in state modifier:
var mainContext = Engine.createContext();
var surface = new Surface({
size:[100,100],
content: 'Click Me'
});
var modifier = new StateModifier({
align: [.5, .5],
origin: [.5, .5],
transform: Transform.translate(0,-240,0)
});
surface.on("click", function(){
modifier.setTransform(Transform.translate(0,0,0), {curve: 'easeIn', duration: 700});
});
mainContext.add(modifier).add(surface);
The same question is about transitionable state maintainer. When and why I should use it instead of direct setting transform and transition of state modifier as shown in the code?

Answer 1

According to the Famo.us Docs, modifier.setTransform (as used in talves example) is Deprecated.
From https://famo.us/docs/api/latest/core/Modifier
"Deprecated: Prefer transformFrom with static Transform, or use a TransitionableTransform."
--
However the recommended way of using TransitionableTransform is different from what you have. you are supposed to store the reference to a transitionableTransform instance in the Modifier's instantiation.
An advantage you get is that you don't have to reference the modifier when working on it's transform. You just call methods directly on the transform.
Refer here for an example: https://gist.github.com/LearnFamous/ae8d1c8f7af7a702d544

Answer 2

Passing it as an option is just a way to initialize the transform state of your modifier. As pointed out by Antonio setTransform is now deprecated.
The following is the same as your code: Here is the example using TansitionableTransform
var mainContext = Engine.createContext();
var surface = new Surface({
size:[100,100],
content: 'Click Me',
properties: {
backgroundColor: 'lightgrey'
}
});
var transTransform = new TransitionableTransform();
transTransform.set(Transform.translate(0,-240,0));
var modifier = new Modifier({
align: [0.5, 0.5],
origin: [0.5, 0.5],
transform: transTransform
});
surface.on("click", function(){
transTransform.setTranslate(Transform.translate(0,0,0), {curve: 'easeIn', duration: 700});
});
mainContext.add(modifier).add(surface);