[Arranging looped animations in master time line]

Hi,

I'm new to gsap and playing around with grouping animations. I'm struggeling with following:

var mtl = new TimelineLite();

function hufPerspective () {
	
	var sentence = Huf.html().split("");
	var tl = new TimelineMax({repeat:1, repeatDelay:2, yoyo:true}); 

	TweenLite.set(Huf, {css:{perspective:500, perspectiveOrigin:"50% 50%", transformStyle:"preserve-3d"}});
	Huf.html("");
	
	$.each(sentence, function(index, val) {
		
		if(val === " ") {
			val = " ";			
		}
		var letter = $("<span/>", {id : "txt" + index}).html(val).appendTo(Huf);
	   	tl.to(letter, 1, {autoAlpha:1, ease:Back.easeOut,  rotationX:360, transformOrigin:"50% 50% -20"}, index * 0.05);
	   	
	});
	
	return tl;
}

mtl.add(hufPerspective(),1);
mtl.play();

I can't this getting run. If I remove the 'return' the animation plays as expected, but with the retunr nothing happens. What is my mistake?

 

Thanks. Olaf