Use requestAnimFrame

This should give smoother animations and lessen power usage

src/app/timebars.coffee

-require('./rAF')()
+require('./rAF')
 d3 = require 'd3-browserify'
 lodash = require 'lodash'
 dragDealer = require('dragdealer').Dragdealer
@@ -21,7 +21,7 @@ horizMargin = (chartId) ->
 vertMargin = (chartId) ->
   25
 
-speed = -> 200
+fps = -> 10
 
 barThickness = (chartId) ->
   Math.floor(chartHeight(chartId) / numBars(chartId)) - 2
@@ -361,28 +361,29 @@ setFrame = (chartId, frame) ->
     chartState[chartId].currentFrame = frame
     chartState[chartId].slider.setStep(frame, 0, snap=true)
 
-stopAnim = (chartId) ->
-  clearInterval chartState[chartId].timeBarAnim
-  chartState[chartId].timeBarAnim = undefined
-  document.getElementById(chartId + "playBtn")
-    .innerHTML = "<i class='fa fa-play'></i>"
-
 startAnim = (chartId) ->
-  chartState[chartId].timeBarAnim = setInterval ->
-    nextFrame chartId
-  , speed()
+  chartState[chartId].animActive = true
   document.getElementById(chartId + "playBtn")
     .innerHTML = "<i class='fa fa-pause'></i>"
+  animloop chartId
+
+stopAnim = (chartId) ->
+  chartState[chartId].animActive = false
+  document.getElementById(chartId + "playBtn")
+    .innerHTML = "<i class='fa fa-play'></i>"
 
 toggleAnim = (chartId) ->
-  if chartState[chartId].timeBarAnim?
+  if chartState[chartId].animActive
     stopAnim chartId
   else
     startAnim chartId
 
-animloop = () ->
-  requestAnimFrame animloop
-  render()
+animloop = (chartId) ->
+  if chartState[chartId].animActive
+    setTimeout () ->
+      window.requestAnimationFrame -> animloop chartId
+      nextFrame chartId
+    , 1000 / fps()
 
 displayPoster = (chartId, icon, header, message) ->
   container = d3.select "#" + chartId