velocity.js

[iryoku]

I wonder if supporting velocity.js animations align with featherlight design philosophy? They are way smoother than jquery in the general case. In particular, I'm using velocity.js for my webpage, and wanted for featherlight to support this so that I can completely remove the effects module from jquery (and then save some kb).

I've hacked them myself in featherlight in my webpage for the older 0.4.1 version. I could give the source code if you are interested, but doing it from scratch should be equally easy.

[marcandre]

Let me think about it some more, but at first I'd say that we won't support velocity.js in particular out of the box, but on the other hand it would be nice to support changing the animation somehow. Let me check the code to see how easily achievable this is without making it overly complex.

[iryoku]

It's not a very intrusive change. I basically pass a function for "animate" in featherlight:
...
afterOpen: $.noop, /* Called after open. Gets event as parameter, this contains all data /
afterClose: $.noop, / Called after close. Gets event as parameter, this contains all data */
animate: $.fn.animate
...

And a stop one for featherlight gallery:
...
fadeIn: 100, /* fadeIn speed when image is loaded /
fadeOut: 300, / fadeOut speed before image is loaded */
stop: $.fn.stop
...

Then I pass custom animate functions for velocity.js:
$.featherlight.defaults.animate = function(properties, duration, easing, complete) { return this.velocity(properties, duration, easing, complete); };
$.featherlight.defaults.stop = function() { return this.velocity("stop"); };

Then I use them as follows inside of featherlight (and gallery):
fl.config.stop.call($img);
fl.config.animate.call($img, {opacity: 1.0}, fl.config.gallery.fadeIn);