Scale ScrollView without breaking scrolling

Question

Short question. How can I add a size modifier using Transitionable to a ScrollView, without breaking the scrolling itself ? Seems like it's blocking events in some way.

Code:

define('main', function (require, exports, module) {
    var Engine          = require('famous/core/Engine');
    var Surface         = require('famous/core/Surface');
    var Transform       = require('famous/core/Transform');
    var Scrollview      = require('famous/views/Scrollview');
    var Modifier        = require("famous/core/Modifier");
    var Transitionable  = require("famous/transitions/Transitionable");

    var context = Engine.createContext();
    var sizeTrans = new Transitionable(0);
    var sizeModifier = new Modifier({
        transform : function(){
            var s = sizeTrans.get() + 1;

            return Transform.scale(s, s, 0);
        }
    });

    var scrollview = new Scrollview();
    var surfaces = [];

    scrollview.sequenceFrom(surfaces);

    for (var i = 0; i < 40; i++) {
        var surface = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 200],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "200px",
                 textAlign: "center"
             }
        });

        surface.pipe(scrollview);
        surfaces.push(surface);
    }

    context
       .add(sizeModifier)
       .add(scrollview);
});

I was trying to create a live example, but it's not working unfortunately :/ http://jsfiddle.net/7fzfx19h/1/

score 0 · Answer 1 · answered Aug 18 '14 at 23:38

Fixed my code, now the demo works http://jsfiddle.net/7fzfx19h/2/ :

define('main', function (require, exports, module) {
    var Engine          = require('famous/core/Engine');
    var Surface         = require('famous/core/Surface');
    var Transform       = require('famous/core/Transform');
    var Scrollview      = require('famous/views/Scrollview');
    var Modifier        = require("famous/core/Modifier");
    var Transitionable  = require("famous/transitions/Transitionable");

    var context = Engine.createContext();
    var sizeTrans = new Transitionable(0);
    var sizeModifier = new Modifier({
        transform : function(){
            var s = sizeTrans.get() + 1;

            return Transform.scale(s, s);
        }
    });

    var scrollview = new Scrollview();
    var surfaces = [];

    scrollview.sequenceFrom(surfaces);

    for (var i = 0; i < 40; i++) {
        var surface = new Surface({
             content: "Surface: " + (i + 1),
             size: [undefined, 200],
             properties: {
                 backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                 lineHeight: "200px",
                 textAlign: "center"
             }
        });

        surface.pipe(scrollview);
        surfaces.push(surface);
    }

    context.add(sizeModifier).add(scrollview);
});

Scale ScrollView without breaking scrolling

1 Answers1