concurrent modifiers result in huge surface trembling in famo.us - famo.us

Question

My goal is to mimic Z-translation in perspective mode by using multiple modifiers. I can not use just z-translation of a surface because a text of translated surface became blurred (at least at Chrome but also on another browsers). The idea of using concurrent modifiers is explained in my blog: https://ozinchenko.wordpress.com/2015/02/04/how-to-avoid-blurring-of-the-text-in-famo-us-during-transition-in-z-direction/
As a result I want to have smooth translation in Z direction surface with a smooth text scaling.
the codepen code is here:
http://codepen.io/Qvatra/pen/yyPMyK?editors=001
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var ImageSurface = famous.surfaces.ImageSurface;
var ContainerSurface = famous.surfaces.ContainerSurface;
var View = famous.core.View;
var Entity = famous.core.Entity;
var Modifier = famous.core.Modifier;
var StateModifier = famous.modifiers.StateModifier;
var Transform = famous.core.Transform;
var Transitionable = famous.transitions.Transitionable;
var TransitionableTransform = famous.transitions.TransitionableTransform;
var Easing = famous.transitions.Easing;
var Scrollview = famous.views.Scrollview;
var perspective = 1000;
var fontValue = 100; //initially font-size is 100%
var surfSize = [100,100];
var mainContext = Engine.createContext();
mainContext.setPerspective(perspective);
var transitionable = new Transitionable(0);
var mySurface = new Surface({
size: surfSize,
properties: {
backgroundColor: 'red',
textAlign: 'center',
color: 'white',
fontSize: fontValue + '%',
lineHeight: surfSize[1] + 'px'
},
content: 'Click Me'
});
var transitionModifier = new StateModifier({
origin: [.5, .5],
align: [.5, .5],
transform: Transform.translate(0,0,0.01)
});
mainContext.add(transitionModifier).add(mySurface);
function translateZ(dist, transition) {
transitionable.reset(0);
transitionable.set(dist, transition);
function prerender() {
var currentDist = transitionable.get();
//perspective formula: dist = perspective(1 - 1/scaleFactor)
var currentScale = 1 / (1 - currentDist / perspective);
var currentSize = [surfSize[0] * currentScale, surfSize[1] * currentScale];
var currentFontValue = fontValue * currentScale;
//f.e: bring closer => make projection scaleFactor times bigger
var transitionTransform = Transform.translate(0,0, currentDist);
//scaling back to avoid text blurring
var scaleTransform = Transform.scale(1/currentScale, 1/currentScale, 1);
transitionModifier.setTransform(Transform.multiply(transitionTransform, scaleTransform));
mySurface.setSize(currentSize); //resize to get correct projection size
mySurface.setOptions({
properties:{
fontSize: currentFontValue + '%', //resizing font;
lineHeight: currentSize[1] + 'px' //align text;
}
})
if (currentDist === dist) {
Engine.removeListener('prerender', prerender);
}
}
Engine.on('prerender', prerender);
}
Engine.on('click', function() {
translateZ(750, {curve: 'easeOutBounce', duration: 2000});
});
Why do I have the shaking of the image? How to avoid that?

Answer 1

The StateModifier is changing the size of your surface while you are setting the size of the surface. Because you are handling the size of the surface, there is no need to change (set) the StateModifier to scale. I am not sure your method will hold up in all cases, but this answers your question.
Here is a new translateZ function:
function translateZ(dist, transition) {
transitionable.reset(0);
transitionable.set(dist, transition);
function prerender() {
var currentDist = transitionable.get();
//perspective formula: dist = perspective(1 - 1/scaleFactor)
var currentScale = 1 / (1 - currentDist / perspective);
var currentSize = [surfSize[0] * currentScale, surfSize[1] * currentScale];
var currentFontValue = fontValue * currentScale;
mySurface.setSize(currentSize); //resize to get correct projection size
mySurface.setOptions({
properties:{
fontSize: currentFontValue + '%', //resizing font;
lineHeight: currentSize[1] + 'px' //align text;
}
})
if (currentDist === dist) {
Engine.removeListener('prerender', prerender);
}
console.log('trans')
}
Engine.on('prerender', prerender);
}