car acceleration / brake

_.md

[ Launch: Snap.svg test ] 7587784 by poezn

anim.svg

config.json

{"description":"car acceleration / brake","endpoint":"","display":"svg","public":true,"require":[{"name":"Snap SVG","url":"https://raw.github.com/adobe-webplatform/Snap.svg/master/dist/snap.svg-min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"anim.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/7Fuoj7K.png"}

inlet.js

var width = 680;

var svg = d3.select("#animation-accel-brake");

var brake = function(t) {
  var v0 = 2;
  var a = -2;
  return v0 * t + (1/2)* a * t * t;
}
var brakeHard = function(t) {
  var v0 = 2.5;
  var a = -3.07;
  t = Math.min(0.7, t);  
  return v0 * t + (1/2)* a * t * t;  
} 

var cars = [
    { "id": "#car-normal-accel", "easing": "quad", "duration": 5000, "start": 0, "end": width + 100 },
    { "id": "#car-hard-accel", "easing": "quad-in", "duration": 3500, "start": 0, "end": width + 100 },
    { "id": "#car-normal-brake", "easing": brake, "duration": 5000, "start": -200, "end": width },
  { "id": "#car-hard-brake", "easing": brakeHard, "delay": 1000, "duration": 5000, "start": -200, "end": width  }     
]; 
    
var render = function() {

	var carAccelNormal = svg.select("#car-normal-accel");
    var carAccelHard   = svg.select("#car-hard-accel");
	var carBrakeNormal = svg.select("#car-normal-brake");
	var carBrakeHard   = svg.select("#car-hard-brake");
	var barAccelNormal = svg.select("#bar-accel-normal");
    var barAccelHard   = svg.select("#bar-accel-hard");
	var barBrakeNormal = svg.select("#bar-brake-normal");
	var barBrakeHard   = svg.select("#bar-brake-hard");
  
    carAccelNormal
    .attr("transform", "translate(0, 0)")
	.transition()  
    .ease("quad") 
    .duration(5000)
    .attr("transform", "translate(" + (width + 100) + ", 0)")

    carAccelHard
    .attr("transform", "translate(0, 0)")
	.transition()  
    .ease("quad-in") 
    .duration(3500)
    .attr("transform", "translate(" + (width + 100) + ", 0)")
    .style("opacity", function(d, i) {})

    carBrakeNormal
    .attr("transform", "translate(-200, 0)")
	.transition()  
    .ease(brake)    
    .duration(5000)
    .attr("transform", "translate(" + (width - 100) + ", 0)")

    carBrakeHard
    .attr("transform", "translate(-200, 0)")
	.transition()  
    .ease("linear") 
    .delay(1000)
    .duration(1000)
    .attr("transform", "translate(50, 0)")
    .transition()  
    .ease(brakeHard) 
    .duration(3000)
    .attr("transform", "translate(" + (width - 100) + ", 0)")

    barAccelNormal
    .attr("width", 0) 
	.transition()  
    .ease("expo-out") 
    .duration(2500)
    .attr("width", 25)
	.transition()  
    .ease("expo-out") 
    .duration(2500)
    .attr("width", 15)
    
    barAccelHard
    .attr("width", 0) 
	.transition()  
    .ease("expo-out") 
    .duration(1200)
    .attr("width", 45)
	.transition()  
    .ease("expo-out") 
    .duration(3800)
    .attr("width", 5)
    
    
    setTimeout(render, 6500);
 } 

render();   

styles.css

#display {
  background-color: #FFF;
}