jsguy
commented
10 years ago Yeah good point - I was thinking of adding a bunch of included bindings - but I'm going to use the bindings library, as it will make it much quicker and easier, for example:
m.addBinding("fade", function(prop){
m.animate(this, { opacity: prop()? 0: 1 });
});And then to use to use the new "fade" binding in your view (assuming you have sugartags), it's really easy :
DIV({ fade: o.myProperty }, "I'll fade away when myProperty is true...")Here is a codepen I prepared for you: http://codepen.io/jsguy/pen/ubHJE
One thing I am vary of is that people might be put off by having to use the bindings library, but to make it possible to make bindable animations I'd end up rewriting more than 1/2 of the binding stuff, so it seems moot to not just use it... What do you reckon about using the bindings library, any reservations?
As far as the state of the animation goes, it's an interesting idea to create a property, though I think it's fine to use one in the model. How would you see it work if the property is automatically created? And how would you access it? You could perhaps write a method on the controller or model that did this, and created a binding at the same time, but it might be easier to just have people create the property, as they need to bind something to it, eg: an event, or some code that changes it....
The only improvement i can think about after a quick overview it's that could be nice to have a helper to create new animation. In the examples, it does'nt seem natural to me to have to keep the state of the animation in the model: it's not really data. Maybe the helper could create the prop & keep track of the state too.