Translating a group

var s = Snap("#svgout");

function nextFrame ( frameArray,  whichFrame ) {
        if( whichFrame >= frameArray.length ) { return }

	if( typeof frameArray[ whichFrame ].startFunc === 'function' ) { 
		frameArray[ whichFrame ].startFunc.call(frameArray[ whichFrame ].el) 
	};

        frameArray[ whichFrame ].el.animate( 	frameArray[ whichFrame ].animation, 
						frameArray[ whichFrame ].dur, 
						frameArray[ whichFrame ].easing,
						nextFrame.bind(null,  frameArray, whichFrame + 1 ) 
	);

}

var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });

var g = s.group(r,c);

var myFrames = [
	{   el: g,            animation: { transform: 'r360,150,150' }, dur: 1000, easing: mina.bounce },
        {   el: r,            animation: { transform: 't100,-100s2,3', fill: 'green' }, dur: 1000, easing: mina.bounce },
        {   el: r,            animation: { transform: 't100,100' }, dur: 1000, easing: mina.bounce, startFunc: sayHello },
        {   el: g,            animation: { transform: 's2,1' }, dur: 1000, easing: mina.bounce },
        {   el: r,            animation: { transform: 's1,2' }, dur: 1000, easing: mina.bounce },
        {   el: c,            animation: { transform: 's1,1' }, dur: 1000, easing: mina.bounce }];

nextFrame( myFrames, 0 );

function sayHello() {
	alert('hello, this is me ==> ' + this);
}

   


        Edit/Run