animate js-sequence-diagrams in reveal.js

animation.js

function initDiagram(selector) {
  // draw diagram. selector is the html element containing the diagram description
  $(selector).sequenceDiagram({theme: 'hand'});
  // get width and height to set the viewBox Attribute. this is needed to resize the svg via css
	var w = $(selector + " svg").attr("width");
	var h = $(selector + " svg").attr("height");
	$(selector + " svg").attr('id', selector + "-id");
	var svg = document.getElementById(selector + "-id");
	svg.setAttribute("viewBox","0 0 " + w + " " + h);
	
	// we want to animate all messages in the sequence diagram. message consinst of an arrow, a text and a box around the text.
	// we can find arrows via path[marker-end]. text and box are path and rect directly before the arrow.
	$(selector + " path[marker-end]").each(function(index) {
	  // set fragement-class and index on the arrow
		var arrow = this;
		$(arrow).attr('class', 'fragment');
		$(arrow).attr('data-fragment-index', index)
		// ... and on the text
		var text = $(arrow).prev('path');
		text.attr('class', 'fragment');
		text.attr('data-fragment-index', index);
		// ... and on the box
		var rect = $(text).prev('rect');
		rect.attr('class', 'fragment');
		rect.attr('data-fragment-index', index);
	});
}