title: Animating opacity of 1400 Raphael.js objects hurts animating performance
body: <p>First off, thank you for any help. :)</p>
  
  <p><a href="http://jsfiddle.net/st8ofmindz79/rz4yY/36/" rel="nofollow noreferrer">JSFiddle code</a>.</p>
  
  <p><a href="http://jsfiddle.net/st8ofmindz79/rz4yY/36/embedded/result/" rel="nofollow noreferrer">JSFiddle full screen</a></p>
  
  <p>As you can see by the fiddle link above I am animating 1400 objects trying to create a 'twinkling effect'.  As the user moves the mouse faster more hexagon shapes pop into full opacity and have varying fade out rates.  The version in the fiddle fills the space with enough color but feels jerky and clumpy.  If I lessen the fade_time variable amounts it is smoother but does not have enough hexagons with full opacity.  The end goal is to spell words with the hexagons. </p>
  
  <p>The performance in Chrome is best, less so in FireFox and IE.  I tested (using Raphael's element.touchmove) in mobile safari on an iPad and it was even worse.</p>
  
  <p>I'm looking for any advice on what pieces of the code could be done differently for performance gains.</p>
  
  <p>I saw <a href="https://stackoverflow.com/a/2868299">this answer</a> somebody else gave that was supposed to help with performance, but I'm trying to base the amount of animating hexagons on cursor movement and I'm not sure I could do that with a timer.</p>
  
  <p><a href="https://stackoverflow.com/a/7842355">This answer</a> mentioned using canvas:</p>
  
  <blockquote>
    <p>A good alternative would be using Canvas to draw the elements. From my experiments it will be faster than SVG at drawing this many although if you are using some animations, they will be harder to implement than with the RaphaelJS library.</p>
  </blockquote>
  
  <p>Does that seem like a better route to people, even with the animations the code is using?</p>
  
  <p>This is my first use of Raphael.js.  I'm not very experienced in JS in general, so any help is wunderbar!</p>
  
  <p><strong>Edit:</strong> Edit: Also, seeing <a href="https://codereview.stackexchange.com/a/10969/16237">this answer</a> about .resize being called more times than the questioner might have thought got me wondering if the .mousemove function may be called more times (more than I would need) than I would expect.</p>