Connect with:
About Me
Alessandro Annini
I'm a freelance developer currently working at I really love 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
Meta Code | Show/Hide nodes with visibility modifier

Show/Hide nodes with visibility modifier

01 Jul Show/Hide nodes with visibility modifier

What if you simply want to show/hide a renderable?

ScrollViews have a clever algorithm to determine which surfaces to render.The RenderController has a clever algorithm that allows for renderables to transition in and out of view…..

For all other uses – no scrolling or transitioning – use this:

var Modifier = require('famous/core/Modifier');
var StateModifier = require('famous/modifiers/StateModifier');

__original_modify = Modifier.prototype.modify;

Modifier.prototype.modify = function extended_modify(target) {,target);
  // here is the hack: set target to NULL if it should not be visible!
  if(this._visibleGetter) this.visible = this._visibleGetter(); = this.visible === undefined || this.visible? target: null;
  return this._output;

Modifier.prototype.visibleFrom = function(visible){
    if (visible instanceof Function) this._visibleGetter = visible;
    else if (visible instanceof Object && visible.get) this._visibleGetter = visible.get.bind(visible);
    else {
        this._visibleGetter = null;
        this.visible = visible;
    return this;

StateModifier.prototype.setVisible = function(value) {
  this._modifier.visible = value;

Now you can use the following methods:

  • Modifier.visibleFrom(function(){ return true // or false; })
  • StateModifier.setVisible(true); // or false;

If you don’t like hacking the core, you can use a ShowModifer:

var Transform = require('famous/core/Transform');

function ShowModifier(options) {
  this.visible = !!options.visible;
  this._output = {
    transform: Transform.identity,
    opacity: 1,
    origin: null,
    align: null,
    size: null,
    target: null

ShowModifier.prototype.modify = function(target){ = this.visible? target: null;
  return this._output;
}; = function show(){
  this.visible = true;

ShowModifier.prototype.hide = function hide() {
  this.visible = false;

module.exports = ShowModifier;

EDIT: WARNING itself warns for performance pentalties from adding/removing nodes the the render tree. Read the full thread here.