Skip to content

Instantly share code, notes, and snippets.

@joannecheng

joannecheng/_.md

Created July 23, 2014 17:06
Show Gist options
  • Save joannecheng/991bc5fd5349d22446e7 to your computer and use it in GitHub Desktop.
Save joannecheng/991bc5fd5349d22446e7 to your computer and use it in GitHub Desktop.
Download ZIP
anim test
Raw
_.md
Raw
config.json
{"description":"anim test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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}},"fullscreen":false,"play":true,"loop":true,"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/pu16HsT.gif","ajax-caching":true}
Raw
inlet.js
var svg = d3.select("svg")
//easing functions: https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease
//interpolators: https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_interpolate
tributary.duration = 2000;
tributary.delay = 80;
circle = svg.append("circle")
.attr({
cx: 220,
cy: 300,
r: 50
})
.style({
fill: "#72a2fc"
})
circle
.transition().delay(5000)
.attr('cx', 400)
circle.transition().delay(5400)
.attr("r", 100)
circle.transition().delay(6000)
.attr("r", 50)
circle.transition().delay(6400)
.attr("cx", 200)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment