Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>   
  <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="huh"></div>
  
</body>
</html>
 
var paper = Raphael("huh",500,500);
    paper.customAttributes.pathXY = function( x,y ) {
      var pathArray = Raphael.parsePathString(this.attr('path'));
      var transformArray = ['T', x - this.pathXY('x'), y - this.pathXY('y') ];
        return { 
          path: Raphael.transformPath( pathArray, transformArray) 
        };
    };
    Raphael.el.pathXY = function(xy) {
        if(this.constructor.prototype == Raphael.st){ // if a set
          var positions = [];
          this.forEach( function( element ){
            var position = ( element.pathXY(xy) ); // recursive for sets of sets
            if(position){ // if set, calculate and return average X or Y of set
              positions.push(position);
            }
          });
          return eval(positions.join('+')) / positions.length;
        } else { // if an element
          if(xy == 'x' || xy == 'y'){ // to get x or y of path
            xy = (xy == 'x') ? 1 : 2;
            var pathPos = Raphael.parsePathString(this.attr('path'))[0][xy];
//            console.log(pathPos);
            return pathPos;
          } else { // to initialise a path's pathXY, for animation
            console.log('init',this.pathXY('x'),this.pathXY('y'), this);
            this.attr({pathXY: [this.pathXY('x'),this.pathXY('y')]});
          }
       }   
    }
    Raphael.st.pathXY = Raphael.el.pathXY;
var path = paper.path('M100 100,105 105,95 105,95 95,105 95,100 100');
var path2 = paper.path('m50 50,105 105,-95 -105,95 95,-105 -95,100 100');
var path3 = paper.path('m0 50,105 5,-95 -5,95 95,-5 -5,0 0');
var set = paper.set(path2, path3);
var set2 = paper.set(path);
set2.push(set);
set2.pathXY(); // necessary to avoid pathXY animation hitting NaN
// get path position when you need X or Y to stay the same
set2.animate({pathXY: [150,set2.pathXY('y')]},1000, '<', function(){
  set2.animate({pathXY: [set2.pathXY('x'),150]},1000, 'elastic', function(){
    set2.animate({pathXY: [50,50]}, 1000, 'bounce');
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers