I am going to create a curve on which a white colored pointer moves slowly, That pointer has long tail of boxes from opacity 1 to 0. Here is a fiddle without animating of pointer. I am trying to move those boxes of pointer tail but they are loosing their distances. Here is another step what I did for animation n what I am getting. How can I animate without loosing originality of the pointers like in first fiddle link?

Here is the animation code What I did

`` var paper = Raphael(0,0, 1300,700);var p=paper.path('M27,443Q159,708,342,370,500,60,640,370,800,700,940,445').attr({stroke:'#000','stroke-width':10,});Len = p.getTotalLength();paper.customAttributes.Along = function (v) {var Point = Curve.getPointAtLength(v * Len);return {transform: "t" + [Point.x, Point.y] + "r" + Point.alpha};};var arr=[],ifor(i=0;i<500;i+=12){arr.push(paper.path(p.getSubpath(i,i+10)).attr({stroke:'#FFF','stroke-width':10,opacity:(i/800),along:0}))}var x=0;function move(){var tmp;for(var d=arr.length-1;d>0;d--){if(d==(arr.length-1)){tmp=arr[arr.length-1].attr('path').toString();arr[arr.length-1].attr({path:p.getSubpath(x,x+5)});}else if(d==0){arr[i]=tmp;}else{var t=arr[d].attr('path').toString();arr[d].attr({path:tmp});tmp=t;}}x++;if(x>1200)return;setTimeout(move,1)}move()``

Top