Insert copies SVG elements into DOM with GSAP

Question

I'm trying to use TweenMax and TimelineMax to animate several circle elements on a page. The actual SVG only has one instance of this particular circle element, but I would like the animation sequence to animate several of these same elements with the same specified transitions.

Is it possible to 'copy' an SVG element and perform a staggered animation?

For example:

function makeFiveCopies() {
  // return array of five identical 'circle' elements
}

var circles = makeFiveCopies($('circle'));

var tl = new TimelineMax();

tl.staggerTo(circles, 2, { yPercent: 300 });

tl.play();

Is it possible to do something like this with Greensock, or do I have to actually insert several identical copies of the element into the SVG with an SVG editor?

http://codepen.io/himmel/pen/qOmpGm

Answer 1

If you look at this CodePen example you can see that I am using JavaScript to dynamically create SVG <circle> tags. And than I animate it with GSAP stagger.

http://codepen.io/jonathan/full/EVgYbB

Example in codepen editor mode:

http://codepen.io/jonathan/pen/EVgYbB

You have to use createElementNS instead of createElement, since SVG requires you to specify a namespace URI.

createElementNS: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

createElement: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

The HTML:

<svg id="box"></svg>

Just an example of what it might look like in the loop, The JS:

var $box = document.getElementById("box"); // main SVG tag
var svgNS = "http://www.w3.org/2000/svg";

var circleCount = 25;    

for (var i = 0; i < circleCount; i++) {

   var circle = document.createElementNS(svgNS, 'circle');

   var r = (i + 2) * 4;
   var cx = mainW;
   var cy = mainH;

   circle.setAttributeNS(null, "id", "circle" + i);
   circle.setAttributeNS(null, "cx", cx);
   circle.setAttributeNS(null, "cy", cy);
   circle.setAttributeNS(null, "r", r);

   $box.appendChild(circle);
}