UX: transitions

_.md

[ Launch: UX: animation line explosion ] 9969101 by roundrobin
[ Launch: ux: animation button ] 9968620 by roundrobin
[ Launch: sin waves ] 9967808 by roundrobin

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"description":"UX: transitions","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/45kMV5u.png","ajax-caching":true}

inlet.js

var mainX=269;
var mainY=174;


function line(c1,c2,x,y, color, className){
    var group = g.append("g")
    .attr({
      transform: "translate("+[mainX,mainY]+")",
      "class": "group"
    });
    
    
    group.append('line')
      .attr({
         stroke:color,
         "stroke-width":13,
         fill: "none",
        "stroke-linecap": "round",
         x1: 0,
         x2: c1,
         y1: 0,
         y2: c2,
        "class" : className,
        "transform" : "translate("+x+","+y+")",
        "opacity": 1
    });
  
  } 
  
  var colors = ["#1abc9c","#3498db","#9b59b6",
                "#f1c40f","#e67e22","#e74c3c",
                "#2c3e50","#c0392b"];
  
  var n = 7;
  var outer =  80;
  var inner = 20;
  var idStart = Math.floor(Math.random()*1000);
  
  
  for(var i = 0; i < n; i++){
    
    var cx = outer * Math.cos(2 * Math.PI * i / n);
    var cy = outer * Math.sin(2 * Math.PI * i / n);
    
    var c1 = inner * Math.cos(2 * Math.PI * i / n);
    var c2 = inner * Math.sin(2 * Math.PI * i / n);
    
    line(cx,cy,c1,c2,colors[i], "line-"+idStart+i);
     
      
  }     
	
var delay = 0;

for(var i = 0; i < n; i++){
  
  var trans = d3.select(".line-"+idStart+i)
  .transition()
  .delay(function(d,j){return i*90})
  .ease("cubic-in")
  .duration(500)
  .attr({x2: 0 });

  trans.transition()
  .ease("cubic-in")
  .each("start", function() { d3.select(this).style("x2", 0); })  
  .duration(500)
  .attr({y2: 0 });

               
               
     
}