joyrexus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Simple demo of a compound animation controlled by mousemove events.  Here, each of the two coordinates of a mouse move control distinct elements.  Note how the y-coordinate delta scales both  circle and radial line and simultaneously rotates this same radial line.  The x-coordinate delta merely slides a 20-pixel circle along the horizon.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://jashkenas.github.io/coffee-script/extras/coffee-script.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.js"></script>
<style>
  line, polyline, circle, ellipse {
    stroke: steelblue;
    stroke-width: 10;
  }
  polyline {
    fill: none;
  }
  circle, ellipse {
    fill: aliceblue;
  }
  rect {
    fill: none;
    stroke: #999;
    stroke-width: 2;
  }
</style>
<body>
  <div id="canvas"></div>
<script type="text/coffeescript">
  w = 960
  h = 500
  c =
    x: w/2
    y: h/2

  draw = SVG('canvas').size(w, h)
  draw.rect(w, h)

  slideX = draw.circle(20)
    .center(40, 40)
    .animate('=').center(w, 40)

  slideY = draw.circle(20)
    .center(40, 40)
    .animate('=').center(40, h)

  C = draw.circle(150).center(c.x, c.y)
  L = draw.line(c.x, c.y, c.x, c.y+75)

  size = C.animate('=').size(400, 400)

  turn = L.rotate(0, c.x, c.y)
    .animate('=')
    .size(0, 200)
    .rotate(360, c.x, c.y)

  document.onmousemove = (e) ->
    X = e.clientX / w
    Y = e.clientY / h
    slideX.to(X)
    slideY.to(Y)
    size.to(Y)
    turn.to(Y)
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="http://jashkenas.github.io/coffee-script/extras/coffee-script.js"></script>
	<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.js"></script>
	<style>
	line, polyline, circle, ellipse {
	stroke: steelblue;
	stroke-width: 10;
	}
	polyline {
	fill: none;
	}
	circle, ellipse {
	fill: aliceblue;
	}
	rect {
	fill: none;
	stroke: #999;
	stroke-width: 2;
	}
	</style>
	<body>
	<div id="canvas"></div>
	<script type="text/coffeescript">
	w = 960
	h = 500
	c =
	x: w/2
	y: h/2

	draw = SVG('canvas').size(w, h)
	draw.rect(w, h)

	slideX = draw.circle(20)
	.center(40, 40)
	.animate('=').center(w, 40)

	slideY = draw.circle(20)
	.center(40, 40)
	.animate('=').center(40, h)

	C = draw.circle(150).center(c.x, c.y)
	L = draw.line(c.x, c.y, c.x, c.y+75)

	size = C.animate('=').size(400, 400)

	turn = L.rotate(0, c.x, c.y)
	.animate('=')
	.size(0, 200)
	.rotate(360, c.x, c.y)

	document.onmousemove = (e) ->
	X = e.clientX / w
	Y = e.clientY / h
	slideX.to(X)
	slideY.to(Y)
	size.to(Y)
	turn.to(Y)
	</script>