Animating blur with the famous framework

Question

Does anyone know what Modifier I would use to animate the blur properties of an item? I'd like to animate from clear to a certain level of blur. Something similar to:

.blur-out {
    -webkit-filter: blur(8px);
    -webkit-transform: scale(1.1, 1.1);
    opacity: 0.25;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;    
}

.blur-in {
    -webkit-filter: blur(0px);
    -webkit-transform: scale(1.0, 1.0);
    opacity: 1.0;
    -webkit-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
}

I guess I could always try changing the class on an item to the above, I was just wondering if there was a Modifier for doing this?

Answer 1

There is currently no specific modifier for animating blur. That being said.. Anytime you want a custom animation, you use TweenTransition or Transitionable. These classes allow you to create a curve between two values with a specified transition. Once this is defined, you can grab the values using .get() and apply them to any property you wish.

Here is a working example..

var Engine            = require('famous/core/Engine');
var Surface           = require('famous/core/Surface');
var StateModifier     = require('famous/modifiers/StateModifier');
var Transitionable    = require('famous/transitions/Transitionable');
var SnapTransition    = require('famous/transitions/SnapTransition');

Transitionable.registerMethod('snap', SnapTransition);

var snap   = { method :'snap',  period: 400,  dampingRatio: 0.7   };

var context = Engine.createContext();

var surface = new Surface({
  size: [200,200],
  properties: {
    backgroundColor: 'red'
  }
});

var transitionable;
var final_pos;

var blurred = false;

var blur_from_to = function(i,f,transition){

    var initial_pos = i;
    final_pos = f;

    transitionable = new Transitionable(initial_pos);

    transitionable.set(final_pos, transition);

    Engine.on('prerender', prerender);
}

var prerender = function(){

  current_pos = transitionable.get();

  var blur_string = 'blur('+ current_pos + 'px)';

  surface.setProperties({ webkitFilter:blur_string});

  if (current_pos == final_pos) {
    Engine.removeListener('prerender',prerender);
  };
}

surface.on("click", function(){

  blurred ? blur_from_to(10,0,snap) : blur_from_to(0,10,snap) ;
  blurred = !blurred;

} );

context.add(new StateModifier({origin:[0.5,0.5]})).add(surface);

Good Luck!