How to increase surface size using a click event within famo.us?

Question

I am attempting to increase the scale or the size of the surface so that it takes up the window when I click on it. Assume that a surface is created and is called surface3.

I have a boolean marked as flag that changes its value everytime the surface3 is clicked. true will cause a 'growSurface' event to be emitted that the eventHandler will respond to.

I do not know how to smoothly animate using a Famous.Transitionable to tween the increase in scale or size. I am able to successfully place a surface3.setSize([undefined, undefined]); to get it to jump to take up the window. How do I get it to animate in size or scale using a Transitionable?

Template.projects.rendered = function() {

    Famous.Engine = famous.core.Engine;
    Famous.Surface = famous.core.Surface;


    Famous.Transform = famous.core.Transform;
    Famous.Transitionable = famous.transitions.Transitionable;
    Famous.Modifier = famous.core.Modifier;
    Famous.StateModifier = famous.modifiers.StateModifier;
    Famous.Easing = famous.transitions.Easing;
    Famous.EventHandler = famous.core.EventHandler;

    var mainContext = Famous.Engine.createContext();
    var eventHandler = new Famous.EventHandler();

    var surface3 = new Famous.Surface({
      size: [300, $(window).height()],
      content: "surface 3",
      properties: {
        color: '#FFF',
        backgroundColor: 'green'
      }
    });

    var flag = false;

    var scaleModifier = new Famous.Modifier({
      size: [300, $(window).height()]
    });

    scaleModifier.sizeFrom(function(){
      return transitionable.get();
    });

    eventHandler.on('growSurface', function(){
        // can do surface3.setSize( $(window).width() );
        var transitionable = new Famous.Transitionable( 300 );
        return transitionable.set( $(window).width(), {duration: 1500} );

    });

    eventHandler.on('shrinkSurface', function(){
        console.log('shrink surface init');
        // code to shrink size back to [300, $(window).height()]
        // should reverse 'growSurface' event
        // can do surface3.setSize([300, undefined]);
    });

    // Handles Clicks
    surface3.on('click', function(event) {
        if (flag === false) {
            eventHandler.emit('growSurface');           
            flag = !flag
        } else {
            eventHandler.emit('shrinkSurface');
            flag = !flag
        }
    });

mainContext.add(scaleModifier).add(alignSurface3Modifier).add(surface3);

score 0 · Accepted Answer · answered Feb 19 '15 at 22:13

I got it both animating on the growSurface and shrinkSurface events:

var eventHandler = new Famous.EventHandler();

var flag = false;

var transitionable = new Famous.Transitionable([300, undefined]);

var scaleModifier = new Famous.Modifier({
    size: [300, $(window).height()]
});

scaleModifier.sizeFrom(function(){
    return transitionable.get();
});


eventHandler.on('growSurface', function(){
    surface3.setSize([undefined, $(window).height()]);
    transitionable.set([$(window).width(), $(window).height()], { duration: 1500 });
});

eventHandler.on('shrinkSurface', function(){
    transitionable.set([300, $(window).height()], { duration: 1500 });

});

// Handles Clicks
surface3.on('click', function(event) {
    if (flag === false) {
        eventHandler.emit('growSurface');           
        flag = !flag
    } else {
        eventHandler.emit('shrinkSurface');
        flag = !flag
    }
});

How to increase surface size using a click event within famo.us?

1 Answers1