JointJS Animate Along Path

Animate a circle along a path inside an element

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.6/joint.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.js"></script>
<!-- JointJS Fiddle -->
<div id="paper"></div>

CSS

#paper {
  display: inline-block;
  border: 1px solid gray;
}

JavaScript

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 600,
  height: 600,
  gridSize: 20,
  model: graph
});

joint.shapes.basic.Cylinder = joint.shapes.basic.Generic.extend({

  markup: '<g class="rotatable"><g class="scalable"><path/></g><text/></g>',

  defaults: joint.util.deepSupplement({

    type: 'basic.Cylinder',
    size: {
      width: 40,
      height: 40
    },
    attrs: {
      'path': {
        fill: '#FFFFFF',
        stroke: '#cbd2d7',
        'stroke-width': 3,
        d: [
          'M 0 10 C 10 5, 30 5, 40 10 C 30 15, 10 15, 0 10',
          'L 0 20',
          'C 10 25, 30 25, 40 20',
          'L 40 10'
        ].join(' ')
      },
      'text': {
        fill: '#435460',
        'font-size': 14,
        text: '',
        'ref-x': .5,
        'ref-y': .7,
        ref: 'path',
        'y-alignment': 'middle',
        'text-anchor': 'middle',
        fill: 'black',
        'font-family': 'Arial, helvetica, sans-serif'
      }
    }

  }, joint.shapes.basic.Generic.prototype.defaults)
});

var cylinder = new joint.shapes.basic.Cylinder({
  position: {
    x: 100,
    y: 100
  },
  size: {
    width: 180,
    height: 150
  },
  attrs: {
    text: {
      text: 'SEQUENCE\nLIBRARY'
    }
  }
});

graph.addCell(cylinder);

// Animatiion

var c = V('circle', {
  r: 8,
  fill: 'red'
});

var cylinderView = cylinder.findView(paper);
// a path we want animate the circle along
var cylinderPath = cylinderView.vel.findOne('path');
// the parent element of the path where the transformation is applied
// see http://jointjs.com/tutorial#custom-elements for scalable group
var cylinderScalable = cylinderView.vel.findOne('.scalable');
// inverse transformation matrix for scalable group
var cylinderScalableCTM = cylinderScalable.node.getCTM().inverse();

c.animateAlongPath({
  dur: '1s',
  repeatCount: 'indefinite'
}, cylinderPath.node);

// apply inverse scale to the circle in order to elimanate scalable group...