car acceleration / brake

_.md

[ Launch: Snap.svg test ] 7587784 by poezn

anim.svg

<svg id="animation-accel-brake">
<rect x="2.636" y="67.273" fill="#DAE4EA" width="50" height="4"/>
<line id="road-accel-hard" fill="none" stroke="#DAE3E9" stroke-miterlimit="10" x1="2.635" y1="158.864" x2="677.805" y2="158.864"/>
<line id="road-accel-hard_1_" fill="none" stroke="#DAE3E9" stroke-miterlimit="10" x1="2.635" y1="179.257" x2="52.636" y2="179.257"/>
<line id="road-accel-normal" fill="none" stroke="#DAE3E9" stroke-miterlimit="10" x1="2.635" y1="54.649" x2="677.805" y2="54.649"/>
<g id="car-hard-accel">
	<path fill="#9EB2C0" d="M68.239,154.923l-40.447-0.213c-0.043,0.383-1.756,4.113-7.283,3.939c-5.529-0.172-6.344-4.928-6.344-4.928
		h-1.156l-0.172,0.771l-8.998-1.5l-1.027-1.371c0,0-0.129-3.213-0.172-4.027c-0.043-0.813,0.256-1.713,0.256-1.713
		s0.943-2.058,1.072-2.314c0.129-0.258,0.129-1.885,0.342-3.342c0.215-1.457,0.602-2.785,0.602-2.785l-0.258-0.772h2.613l5.1-0.814
		c1.799-0.814,11.998-4.885,16.795-5.999c4.801-1.114,22.453-1.542,27.553,0s15.469,6.812,15.469,6.812s0.342,0.087,0.885,0.172
		s7.941,1.457,11.111,2.542c3.172,1.085,7.084,2.914,8,3.685c0.912,0.771,0.885,2.771,0.885,2.771s-0.086-0.285,0.428,0.514
		c0.514,0.801,0.57,2.857,0.457,3.543s-1.076,2.877-1.076,2.877c0.682,0.236,1.072,0.826,1.072,0.826
		c0.066,0.195-0.639,0.596-0.639,0.596c-1.371,0.344-9.256,0.857-9.256,0.857v-1.029l-1.371-0.043
		c-0.17,0.771-1.457,4.971-6.557,4.885c-5.098-0.086-6.301-3.85-6.301-3.85 M38.636,136.577c0,0,1.324-5.381,0.756-5.33
		c-1.604,0.144-3.127,0.356-4.486,0.644c-5.908,1.25-11.898,4-11.898,4L38.636,136.577z M41.261,136.879l28.377,1.244
		c0,0-8.477-4.917-13.656-6c-3.564-0.746-8.93-1.056-13.854-0.772C41.544,131.385,41.261,136.879,41.261,136.879z"/>
</g>
<g id="car-normal-accel">
	<path fill="#9EB2C0" d="M68.239,50.708l-40.447-0.213c-0.043,0.383-1.756,4.113-7.283,3.939c-5.529-0.172-6.344-4.928-6.344-4.928
		h-1.156l-0.172,0.771l-8.998-1.5l-1.027-1.371c0,0-0.129-3.213-0.172-4.027s0.256-1.713,0.256-1.713s0.943-2.058,1.072-2.314
		c0.129-0.258,0.129-1.885,0.342-3.342c0.215-1.457,0.602-2.785,0.602-2.785l-0.258-0.772h2.613l5.1-0.814
		c1.799-0.814,11.998-4.885,16.795-5.999c4.801-1.114,22.453-1.542,27.553,0s15.469,6.812,15.469,6.812s0.342,0.087,0.885,0.172
		s7.941,1.457,11.111,2.542c3.172,1.085,7.084,2.914,8,3.685c0.912,0.771,0.885,2.771,0.885,2.771s-0.086-0.285,0.428,0.514
		c0.514,0.801,0.57,2.857,0.457,3.543s-1.076,2.877-1.076,2.877c0.682,0.236,1.072,0.826,1.072,0.826
		c0.066,0.195-0.639,0.596-0.639,0.596c-1.371,0.344-9.256,0.857-9.256,0.857v-1.029l-1.371-0.043
		c-0.17,0.771-1.457,4.971-6.557,4.885c-5.098-0.086-6.301-3.85-6.301-3.85 M38.636,32.362c0,0,1.324-5.381,0.756-5.33
		c-1.604,0.144-3.127,0.356-4.486,0.644c-5.908,1.25-11.898,4-11.898,4L38.636,32.362z M41.261,32.664l28.377,1.244
		c0,0-8.477-4.917-13.656-6c-3.564-0.746-8.93-1.056-13.854-0.772C41.544,27.17,41.261,32.664,41.261,32.664z"/>
</g>
<text id="label-accel-hard" transform="matrix(1 0 0 1 66.4692 178.2568)" fill="#99CE7B" font-family="'Avenir-Light'" font-size="10">Force greater than 0.28 gravity</text>
<g id="title-accel-hard">
	<text transform="matrix(1 0 0 1 2.6353 116.2559)" fill="#6A7F89" font-family="'Avenir-Light'" font-size="14">Hard Acceleration</text>
</g>
<text id="label-accel-normal" transform="matrix(1 0 0 1 66.4692 74.042)" fill="#99CE7B" font-family="'Avenir-Light'" font-size="10">Force less than 0.28 gravity</text>
<g id="title-accel-normal">
	<text transform="matrix(1 0 0 1 2.6353 12.041)" fill="#6A7F89" font-family="'Avenir-Light'" font-size="14">Normal Acceleration</text>
</g>
<rect id="bar-accel-normal" x="2.636" y="67.273" fill="#99CE7B" width="0" height="4"/>
<rect x="2.635" y="172.841" fill="#DAE4EA" width="50" height="4"/>
<rect id="bar-accel-hard" x="2.635" y="172.841" fill="#99CE7B" width="0" height="4"/>
<polygon fill="#9EB2C0" points="27.749,180.257 30.636,175.257 33.522,180.257 "/>
<line id="road-accel-hard_2_" fill="none" stroke="#DAE3E9" stroke-miterlimit="10" x1="2.635" y1="74.042" x2="52.636" y2="74.042"/>
<polygon fill="#9EB2C0" points="27.635,75.042 30.522,70.042 33.409,75.042 "/>

  
<g transform="translate(0, 391)">
<rect x="2.636" y="67.273" fill="#DAE4EA" width="50" height="4"/>
<line id="road-accel-hard" fill="none" stroke="#DAE3E9" stroke-miterlimit="10" x1="2.635" y1="158.864" x2="677.805" y2="158.864"/>
<line id="road-accel-hard_1_" fill="none" stroke="#DAE3E9" stroke-miterlimit="10" x1="2.635" y1="179.257" x2="52.636" y2="179.257"/>
<line id="road-accel-normal" fill="none" stroke="#DAE3E9" stroke-miterlimit="10" x1="2.635" y1="54.649" x2="677.805" y2="54.649"/>
<g id="car-hard-accel">
	<path fill="#9EB2C0" d="M68.239,154.923l-40.447-0.213c-0.043,0.383-1.756,4.113-7.283,3.939c-5.529-0.172-6.344-4.928-6.344-4.928
		h-1.156l-0.172,0.771l-8.998-1.5l-1.027-1.371c0,0-0.129-3.213-0.172-4.027c-0.043-0.813,0.256-1.713,0.256-1.713
		s0.943-2.058,1.072-2.314c0.129-0.258,0.129-1.885,0.342-3.342c0.215-1.457,0.602-2.785,0.602-2.785l-0.258-0.772h2.613l5.1-0.814
		c1.799-0.814,11.998-4.885,16.795-5.999c4.801-1.114,22.453-1.542,27.553,0s15.469,6.812,15.469,6.812s0.342,0.087,0.885,0.172
		s7.941,1.457,11.111,2.542c3.172,1.085,7.084,2.914,8,3.685c0.912,0.771,0.885,2.771,0.885,2.771s-0.086-0.285,0.428,0.514
		c0.514,0.801,0.57,2.857,0.457,3.543s-1.076,2.877-1.076,2.877c0.682,0.236,1.072,0.826,1.072,0.826
		c0.066,0.195-0.639,0.596-0.639,0.596c-1.371,0.344-9.256,0.857-9.256,0.857v-1.029l-1.371-0.043
		c-0.17,0.771-1.457,4.971-6.557,4.885c-5.098-0.086-6.301-3.85-6.301-3.85 M38.636,136.577c0,0,1.324-5.381,0.756-5.33
		c-1.604,0.144-3.127,0.356-4.486,0.644c-5.908,1.25-11.898,4-11.898,4L38.636,136.577z M41.261,136.879l28.377,1.244
		c0,0-8.477-4.917-13.656-6c-3.564-0.746-8.93-1.056-13.854-0.772C41.544,131.385,41.261,136.879,41.261,136.879z"/>
</g>
<g id="car-normal-accel">
	<path fill="#9EB2C0" d="M68.239,50.708l-40.447-0.213c-0.043,0.383-1.756,4.113-7.283,3.939c-5.529-0.172-6.344-4.928-6.344-4.928
		h-1.156l-0.172,0.771l-8.998-1.5l-1.027-1.371c0,0-0.129-3.213-0.172-4.027s0.256-1.713,0.256-1.713s0.943-2.058,1.072-2.314
		c0.129-0.258,0.129-1.885,0.342-3.342c0.215-1.457,0.602-2.785,0.602-2.785l-0.258-0.772h2.613l5.1-0.814
		c1.799-0.814,11.998-4.885,16.795-5.999c4.801-1.114,22.453-1.542,27.553,0s15.469,6.812,15.469,6.812s0.342,0.087,0.885,0.172
		s7.941,1.457,11.111,2.542c3.172,1.085,7.084,2.914,8,3.685c0.912,0.771,0.885,2.771,0.885,2.771s-0.086-0.285,0.428,0.514
		c0.514,0.801,0.57,2.857,0.457,3.543s-1.076,2.877-1.076,2.877c0.682,0.236,1.072,0.826,1.072,0.826
		c0.066,0.195-0.639,0.596-0.639,0.596c-1.371,0.344-9.256,0.857-9.256,0.857v-1.029l-1.371-0.043
		c-0.17,0.771-1.457,4.971-6.557,4.885c-5.098-0.086-6.301-3.85-6.301-3.85 M38.636,32.362c0,0,1.324-5.381,0.756-5.33
		c-1.604,0.144-3.127,0.356-4.486,0.644c-5.908,1.25-11.898,4-11.898,4L38.636,32.362z M41.261,32.664l28.377,1.244
		c0,0-8.477-4.917-13.656-6c-3.564-0.746-8.93-1.056-13.854-0.772C41.544,27.17,41.261,32.664,41.261,32.664z"/>
</g>
<text id="label-accel-hard" transform="matrix(1 0 0 1 66.4692 178.2568)" fill="#99CE7B" font-family="'Avenir-Light'" font-size="10">Force greater than 0.28 gravity</text>
<g id="title-accel-hard">
	<text transform="matrix(1 0 0 1 2.6353 116.2559)" fill="#6A7F89" font-family="'Avenir-Light'" font-size="14">Hard Acceleration</text>
</g>
<text id="label-accel-normal" transform="matrix(1 0 0 1 66.4692 74.042)" fill="#99CE7B" font-family="'Avenir-Light'" font-size="10">Force less than 0.28 gravity</text>
<g id="title-accel-normal">
	<text transform="matrix(1 0 0 1 2.6353 12.041)" fill="#6A7F89" font-family="'Avenir-Light'" font-size="14">Normal Acceleration</text>
</g>
<rect id="bar-accel-normal" x="2.636" y="67.273" fill="#99CE7B" width="0" height="4"/>
<rect x="2.635" y="172.841" fill="#DAE4EA" width="50" height="4"/>
<rect id="bar-accel-hard" x="2.635" y="172.841" fill="#99CE7B" width="0" height="4"/>
<polygon fill="#9EB2C0" points="27.749,180.257 30.636,175.257 33.522,180.257 "/>
<line id="road-accel-hard_2_" fill="none" stroke="#DAE3E9" stroke-miterlimit="10" x1="2.635" y1="74.042" x2="52.636" y2="74.042"/>
<polygon fill="#9EB2C0" points="27.635,75.042 30.522,70.042 33.409,75.042 "/>
  
  </g>
</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;
}