Basic animation

config.json

{"description":"Basic animation","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"hidepanel":false,"thumbnail":"http://i.imgur.com/YMAf8q2.png","inline-console":false}

inlet.js

//hiii
var rw = [51, 200]
var rh = [51, 200]
var x = [24, 410];
var y = [59, 351];
var color = ["#ff0000", "#0000ff"]
var corners = 24;

var nr = 6;
var nc = 6;

tributary.duration = 1500;
tributary.ease = d3.ease("linear")
//tributary.ease = d3.ease("bounce")
//tributary.ease = d3.ease("cubic")
tributary.clone_opacity = 0.34145
tributary.nclones = 15;
tributary.loop_type = "pingpong" //can also choose "period" or "off"


var sw = tributary.sw;
var sh = tributary.sh;
var xoffset = sw / nr;
var yoffset = sh / nc;

tributary.init = function(g) {
   
   var rect = g.append("rect")
        .attr("width", rw[0])
        .attr("height", rh[0])
        .attr("fill", "#ff0000")
        .attr("rx", corners)
        .attr("ry", corners)   
}

tributary.run = function(g,t) {
    //console.log("t", t)
    var rect = g.select("rect")
        .attr("width", function(d,i) {
            return d3.interpolate(rw[0], rw[1])(t)
        })
        .attr("height", function(d,i) {
            return d3.interpolate(rh[0], rh[1])(t)
        })
        .attr("fill", function(d,i) {
            return d3.interpolateHsl(color[0], color[1])(t)
        })
        .attr("transform", function(d,i) {
            return "translate(" + [
                d3.interpolate(x[0], x[1])(t),
                d3.interpolate(y[0], y[1])(t)
                ] + ")"
        })
}