Animate Opacity async with other Transform functions

Question

I need to make opacity of a surface to transform from 0 to 1 like this:

stateModifier.setTransform(
  Transform.multiply(Transform.opacity(1), Transform.rotateX(0)), 
  { duration : 500, curve: Easing.inOutSine }
);

But Transform.opacity doesn't exist. I know this is basic but how to transform opacity with other properties like translate or rotate.

I know modifier has setOpacity according to http://famo.us/guides/animations

UPDATE

I thought stateModifier.setOpacity is async that can be animated in parallel with others such as translate or scale but it is NOT async. It happens first THEN moves to the next animation. That's why I asked this question.

Answer 1

After you updated your question I think that I better understand what you are looking for. Below is code to change the opacity, size and origin all at the same time. Hopefully is is a better answer than I had previously supplied you. Of course you can view this is a working fiddle here

var chainSurface = new Surface({
  size:[200,200],
  properties: { backgroundColor: 'green'}
})

chainSurface.chain = new ModifierChain();

chainSurface.state = new StateModifier({ origin:[0.5,0.5] });
chainSurface.sizeState = new StateModifier();
chainSurface.fadeState = new StateModifier();

chainSurface.chain.addModifier(chainSurface.fadeState);
chainSurface.chain.addModifier(chainSurface.sizeState);
chainSurface.chain.addModifier(chainSurface.state);

mainContext.add(chainSurface.chain).add(chainSurface);

chainSurface.on('click', function(){
  transition = {duration:1000,curve:Easing.inOutQuad};

  chainSurface.fadeState.setOpacity(0,transition);
  chainSurface.sizeState.setTransform(Transform.scale(0.5,0.5,1),transition);
  chainSurface.state.setOrigin([0.5,0],transition);
});

Answer 2

I created a github repo with an example of how to do it with just one Modifier. https://github.com/thiswildorchid/famous-modifier-reuse but I am including the code here as an example. In this example the animation is triggered on click of the surface but you can trigger it any way you like. Also here is a fiddle for it http://jsfiddle.net/orchid1/jd2q7r0v/1/

I used Tranform.rotateX but you can use any of the rotation transformations. Note that I set defaults for starting values. The benefit of this approach is you only use one Modifier and you don't need a ModifierChain.

    var Engine = require("famous/core/Engine"),
    Modifier = require("famous/core/Modifier"),
    Surface = require("famous/core/Surface"),
    Transitionable = require("famous/transitions/Transitionable"),
    Transform = require("famous/core/Transform");

var context, mod, surf, opacityTransform, rotateTransform;

context = Engine.createContext();

context.setPerspective(1000);

//the opacities starting value is 1
opacityTransform = new Transitionable(1);

//the starting rotation is an angle of zero
//you can console log Transform.identity to see the value but its basically an angle of 0
rotateTransform = new Transitionable(Transform.identity);


//very basic modifier here
mod = new Modifier({
    size: [100, 100],
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
});

//very simple surface
surf = new Surface({
    content: "Hello World",
    properties: {
        border: "1px red solid",
        textAlign: "center",
        lineHeight: "100px"
    }
});

//gotta add everything to the context
context.add(mod).add(surf);

//here I tell the modifier to transform using my custom transitionables transforms
mod.transformFrom(rotateTransform);
mod.opacityFrom(opacityTransform);


//for illustration purposes I used a click event but trigger it any way you like 
surf.on("click", function () {

    //you can add an easing function here if you would like and even a callback as the 3rd argument
    //more importantly here you see I set the opacity to 0 and the rotation to the new angle I want
    opacityTransform.set(0, {duration: 1000});
    rotateTransform.set(Transform.rotateX(1.4), {duration: 1000});
});