Famo.us Multitransform Modifier

by Mabuti

HTML

<link rel="stylesheet" href="https://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/lib/famous/core/famous.css">
<script src="http://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/src/4f231991.polyfills.js"></script>
<script src="https://rawgit.com/jperl/famous-compiled/97f85aaa64af255adfe0407c941e0e859b0759bc/dist/src/804b0adb.main.js"></script>

JavaScript

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var Modifier = Famous.Core.Modifier;
    var Transform = Famous.Core.Transform;
    var StateModifier = Famous.Modifiers.StateModifier;
    var ModifierChain = Famous.Modifiers.ModifierChain;
    var Timer = Famous.Utilities.Timer;
    var Easing = Famous.Transitions.Easing;
    var Transitionable = Famous.Transitions.Transitionable;

    var context = Engine.createContext();
    
var 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});
});
});