bind-transforms
Browser module for binding backbone or human-model properties to properly prefixed CSS3 transforms on an element.
It's meant to be used as a mixin for Backbone.View or human-view.
It's structured for use with browserify and installed with npm.
installing
npm install bind-transforms
example
var HumanView = ;var HumanModel = ;var bindTransforms = ; // **note** we're mixing in `bindTransforms` into the// view here:var View = HumanView; // this could be backbone model toovar Model = HumanModel;
why do this?
I wanted to be able to do something like model.xPos = 2
and have it properly applied to a view without also squashing the translateY
that I may already have set. Since, in CSS each of those (scale and translate) are both set as transforms on the same line, that was challenging. It also requires properly prefixing and then building and setting the full style string an element. By having a model that holds those values in simple formats that I can control (usually just a number). We don't have to worry about re-building that string each time, we can simply make the minimal adjustment to the model's values and the rest of the transforms will still be maintained.
demo
There's a simple demo page set up here: http://projects.joreteg.com/bind-transforms
It's running the app in the example
folder.
more details
arguments: (bindingObject, element, disableZTransform) **or arguments: (model, bindingObject, element, disableZTransform)
You can optionally pass a specific model as the first argument. If you don't then this.model
is used.
The bindingObject
is a simple object containing the model properties (as keys) and the corresponding transforms as values. Each key in the object will be included in the built CSS transform string each time, thereby maintaining previous transform values even for properties that were not changed.
The last argument is for disabling automatically applying translateZ(0)
at the end of the CSS string. We do this by default because it invokes the GPU (you can read more on this here: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/). The assumption being that if you're using transforms you're probably doing so looking for better performance.
a note on binding other things
Your binding object can include bindings to opacity. Opacity is one of the known properties that is known to be computationally inexpensive to animate, it's not a CSS transform
property, but this lib handles that as well, allowing you to bind opacity as well, without any extra code.
You can also bind a few other non-transform properties for convenience. Specifically:
var nonTransformKeys = 'zIndex' 'opacity' 'top' 'bottom' 'left' 'right' 'width' 'height' 'backgroundColor';
changelog
- 1.2.0 diff - Adding ability to bind
color
too. - 1.1.1 diff - Fix regex to allow "." in tests for whether to assume pixels or degrees.
- 1.1.0 diff - Properly adds
px
as default unit for non-transform css props if not specified. Adds forgottenheight
property to the list of bindable "regular" properties. - 1.0.2 diff - Fixes bug where it broke if you bind to passed in a model instead of using
this.model
- 1.0.1 diff - Fixes bug with non-transform css bindings. Key and value references were inverted.
- 1.0.0 - Bugfixes, ability to bind a few animation friendly non-transform properties as well.
credits
If you like this, follow @HenrikJoreteg on twitter. Or if you want to learn more about how we build client side applications at &yet check out my book: Human JavaScript.
license
MIT