Need help on ANIMATING BALL trailing light effect

Need help on ANIMATING BALL trailing light effect

I need assistance on creating a "trailing lights effect" to a .png ball image. I have created this game in AS3.  (see attachment (example_effect.swf).  I need to convert the animation to HTML5. Which I have allready done.  But the problem I am having is the animation.  I cant seem to figure out how to animate the "ball"  with trailing lights to convert it to html5 animation & also the "zoom effect with numbers".  I do have the core animation happening but cant get the effects that represent the .swf to work as they do on the .swf can someone assist me

I can supply you with full html file so you can visualize


---code for html5 animation-------------

<!doctype html>
<html>
<head>
/* SPOTS */
/* style for ALL spots */
.spot{
        height: 35px;
        width: 35px;
        background-color: none;
        position: absolute;
        display: none;
background-image: url("images/white_ball.png");
background-size: 100% 100%;
}

<!-- import external JS libraries -->
<script src="scripts/TweenLite.min.js"></script>
<script src="scripts/CSSPlugin.min.js"></script>
<script src="scripts/BezierPlugin.min.js"></script>
<!-- declare global variables so you can use them in any function -->
<script>
var timeoutID_1;
var timeoutID_2;
var first_spot;
var second_spot;
var four;
var five;
var kNum = [];
var numArray = [];
var n1, n2, n3, n4, n5;
var generatedNums;
var chosenNums = [];
var winningNum;
var randomX;
var randomY;
var pointAX;
var pointAY;
var pointBX;
var pointBY;
var kNumIterator = 0;
var s1, s2, s3, s4, s5;
var spot_holder;
var intervalID;
var intervalID2;
var orderedNums;
var b;

        // determines pointAX and pointAY - starting point of spot animation
        // alter numbers here based on dimension of #container old dimensions were width = 1280 height = 640
        // new dimensions are width = 640 height = 333
        function chooseRandomNums() {
            // each time this function is called, create a new randomX and randomY
            randomX = Math.ceil(Math.random() * 125);
            randomY = Math.ceil(Math.random() * 125);

            // creates random pointA positions.  If ending position (pointB) is on one side of the screen,
            // pointA should be a the other side to ensure animation across the screen.
            if (kNum[chosenNums[kNumIterator]].x < 320) {
                pointAX = randomX + 640;
                //alert("right");
            } else if (kNum[chosenNums[kNumIterator]].x >= 320) {
                pointAX = randomX * -1;
                //alert("left");
            }

            if (kNum[chosenNums[kNumIterator]].y < 166) {
                pointAY = randomY + 333;
                //alert("bottom");
            } else if (kNum[chosenNums[kNumIterator]].y >= 166) {
                //alert("top");
                pointAY = randomY * -2;
            }
        }// end chooseRandomNums()

// generate spot -
function createSpot() {
// get random pointA values
  chooseRandomNums();
  // get X and Y values for PointB
  pointBX = kNum[chosenNums[kNumIterator]].x;
pointBY = kNum[chosenNums[kNumIterator]].y;
// turn on visibility of this particular spot
  spot_holder[kNumIterator].style.display = "block";
  // Tween this spot from pointA to pointB
  TweenLite.fromTo(spot_holder[kNumIterator], 2, {left:pointAX, top:pointAY}, {left:pointBX, top:pointBY, immediateRender:false});
// Iterate kNumInterator
kNumIterator++;
</body>
</html>