Temple Animate

Simple animation for Temple.

Install

Download the latest version dist/ folder and use via a script tag. The variable Animate will be attached to Temple.

<script type="text/javascript" src="temple.js"></script>
<script type="text/javascript" src="temple.animate.js"></script>

If using Browserify or Node.js, you can install via NPM and use via require("temple-animate").

$ npm install temple-animate

Usage

animate

view.animate(path, to [, options ])

This plugin adds an .animate() method to Temple views. It is very similar to .set(), except that it will change the value over time instead of instantly. Keep in mind that both to and the existing value must be numbers or an error will be thrown. This method returns a valid Promise that resolves when the animation completes. If an existing animation is running at the path, it is completed immediately.

Valid options:

• duration — The number of milliseconds to run the animation for.
• easing — Either a string name of a preset easing function or a function that will take tick (float between 0 and 1) and should return a computed tick value. This controls how a value reaches its result.
• repeat — Instead of completing, the animation will continue to animate in the reverse direction. Pass true to repeat infinitely, or pass a number to limit the number of repeats. The limit does not include the initial run, so a value of 1 will cause the animation to run a total of two times (out and back). Call stopAnimating() to stop a repeating animation.
• complete — A function that is called when the animation completes.

stopAnimating

view.stopAnimating(path)

This will cause an existing animation at path to complete immediately. This will not set the value at path to to and will instead leave the value untouched.

Example

The following example animates a div's width and height between 10px and 200px, infinitely.

var view = new Temple({ size: 10 });
 
view.render = function() {
    var model = this.getModel(),
        div = new Temple.Element("div");
 
    div.attr("style", function() {
        var size = model.get("size") + "px";
        
        return "background-color: blue;"
             + "width: " + size + ";"
             + "height: " + size + ";"
    });
 
    return div;
}
 
view.use(Temple.Animate);
view.paint(document.body);
 
view.animate("size", 200, {
    easing: "easeInOutQuad",
    duration: 500,
    repeat: true
});