Connect with:
About Me
Alessandro Annini
I'm a freelance developer currently working at Leaff.it/ I really love famo.us framework and its amazing potential and if you're like me, and you want the web to win, please share some snippet of code for the community and grow faster with us
Categories
Meta
Famo.us Code | Scrollable list view with modifiers
526
post-template-default,single,single-post,postid-526,single-format-standard,ajax_updown_fade,page_not_loaded,,qode-theme-ver-6.2.1

Scrollable list view with modifiers

14 Jul Scrollable list view with modifiers

It was once asked on IRC how to apply a modifier to an item in the Scrollview, based on it’s actual location in the visible region. Here, I will show you one way to achieve it.

First, you add a physics engine and attach a particle body to it:

this._engine = new PhysicsEngine();
this._tracker = new Particle();
this._engine.addBody(this._tracker);

Then you move it based on the distance coming from the GenericSync. In our case TouchSync fires ‘update’ event every time we drag our scroller. We listen for this event and update the position of the particle:

this._eventInput.on('update', _handleUpdate);

function _handleUpdate(event) {
    var delta = event.delta;
    this.setPosition(this.getPosition() - delta);
};

Scrollik.prototype.getPosition = function getPosition() {
    return this._tracker.getPosition()[0];
};

Scrollik.prototype.setPosition = function setPosition(x) {
    this._tracker.setPosition([x, 0, 0]); // [x, y, z]
};

And we update our scroller’s position, based on the location of the particle, so that the positions of both are same:

this._scroller.positionFrom(this.getPosition.bind(this));

Now, we have a good reference of where exactly our scroller is. Time to use it to affect the items in the list! To do that, we would first attach a Modifier for every item in the list and save them to an array for later use:

for (var i = 0; i < surfaces.length; i++) {
    var scaleMod = new Modifier({ 
        align: [1, .5],
        origin: [1, .5]
    });
    this._mods.push(scaleMod);
    container.add(scaleMod).add(surfaces[i]);    
};

By knowing the distance the scroller has moved to the side, the width of each surface and the width of the window, we can easily know which surface is entering the view or leaving it. Having that info at our hands, we can affect the modifiers of these elements.

Here is an example of the solution: