KineticJS + TweenMax

Runs best in Chrome or Safari

No crazy math involed

1. place 50 circles in same position in Kinetic.Group() with alpha of .5.
2. for each circle create a TweenMax with yoyo:true that moves it to a random location.
3. each time TweenLite does a tick rotate the whole group and don't clear() it.

window.onload = function () {
          var stage = new Kinetic.Stage({
              container: "container",
              width: 600,
              height: 200
          });

          var layer = new Kinetic.Layer();
          var group = new Kinetic.Group();

          function randomNumber(min, max) {
              //good
              return Math.floor(Math.random() * (1 + max - min) + min);
          }


          
          for (i = 0; i < 25; i++) {
              var circle = new Kinetic.Circle({
                  x: 0,
                  y: 0,
                  radius: (Math.random() < .50) ? 5 : 15,
                  fill: (Math.random() < .75) ? "#00D2FF" : "#ffffff",
                  stroke: "black",
                  strokeWidth: 5
              });


              TweenMax.to(circle, 1.2, {
                  setX: randomNumber(-300, 300),
                  setY: randomNumber(-200, 300),
                  delay: i * .08,
                  repeat: 500,
                  yoyo: true
              });

              group.add(circle);
          }

          
          stage.add(layer);
          layer.add(group);
          group.setOffset(-150, -50);
          group.setAlpha(.5);
          TweenLite.ticker.addEventListener("tick", go);


          function go() {
              var rot = group.getRotationDeg();
              rot += 1.5;
              group.setRotationDeg(rot);
              
              group.draw();
          }


      };

Back to www.snorkl.tv

or learn more about GreenSock Animation Platform for JS or KineticJS