prjbios

Hi Everyone, I've had a great time playing with GSAP lately (it had been awhile). I've been able to do everything ive wanted to accomplish except for one thing a smooth frame by frame animation loop without any delays on the first frame. no matter what i've tried i eventually get a skip or a delay. I've settled on two methods of achieving this goal. but again, neither have been ideal. One attempt is this <div class="bgs"> <img src="img/key/5.jpg" > <img src="img/key/3.jpg" > <img src="img/key/2.jpg" > </div> var imgs = document.querySelectorAll('.backgrounds img'); var facelooptl =new TimelineMax({repeat:18, yoyo: true}) .staggerFrom(imgs,0,{opacity:0,ease:Linear.easeNone},0.2) the other attempt i made was something like this. //the other attempt is something like below facelooptl = new TimelineMax({repeat:-1}); facelooptl.add('background2') .from('#background2', 0.3, {opacity: 1, ease: Power4.easeInOut }, 'background2+=0'); facelooptl.add('background3') .to('#background2', 0.3, { opacity: 1, ease: Power4.easeInOut }, 'background3') .from('#background3', 0.3, {opacity: 0, ease: Power4.easeInOut }, 'background3+=2'); facelooptl.add('background4') .to('#background3', 0.3, { opacity: 1, ease: Power4.easeInOut }, 'background4') .from('#background4', 0.3, {opacity: 0, ease: Power4.easeInOut }, 'background4+=2'); //these backgrounds have images set in the css. <div class="backgrounds" id="background1"> </div> <div class="backgrounds" id="background2"> </div> <div class="backgrounds" id="background3"> </div> <div class="backgrounds" id="background4"> </div> <div class="backgrounds" id="background5"> </div> <div class="backgrounds" id="background6"> </div> both of these attempts were found off of this forum. Can anyone offer insight?