can this be done with just tweenlite and timelinelite? This is my code below. It loops, but stop at the end. I've been trying to make it stop a few seconds before the end of the timeline but have failed to so.
function start() {
var bg = document.getElementById('bg'),
txt_01 = document.getElementById('txt_01'),
txt_02 = document.getElementById('txt_02'),
txt_03 = document.getElementById('txt_03'),
lockup = document.getElementById('lockup'),
banner = document.getElementById('banner'),
tl = new TimelineLite();
tl.eventCallback("onComplete", loopAnimation);
tl
.add('f1', 0)
.add('f2', 4)
.add('f3', 8)
.add('f4', 12)
tl
.from([txt_01], 1, {x:'-=728px', ease: Power1.easeOut, onStart:function(){banner.style.visibility = 'visible';}})
.from(txt_02, 1, {x:'-=728px', ease: Power1.easeOut}, 'f2-=0.5')
.to(txt_01, 0.6, {opacity: 0, ease: Power1.easeOut}, 'f2-=0.6')
.to(txt_02, 0.6, {opacity: 0, ease: Power1.easeOut}, 'f3-=0.6')
.staggerFrom([txt_03], 0.6, {opacity: 0, ease: Power1.easeOut}, 0, 'f3+=0.5')
.to(txt_03, 0.6, {opacity: 0, ease: Power1.easeOut}, 'f4')
// stops looping animation
.add('stop', '-=2')
// start looping animation
var loopNumber = 0;
function loopAnimation() {
loopNumber = loopNumber + 1;
if (loopNumber >= 2) {
tl.addPause('stop');
console.log('Paused');
} else {
tl.restart();
console.log('Times looped = ' + loopNumber);
}
}
}