onRepeat start 1.5 seconds into timeline

[Gumbo 2 Likes (Newbie)]

Hi,

 

I wanted to loop this creative 3 times but on repeat, start the animation 1.5 in, effectively leaving the picture always visible. Is there a quick way to do this?

 

Thanks

See the Pen BZEqeJ by Gumbo (@Gumbo) on CodePen

[mikel 1,823 Likes (Superhero)]

Hi Gumbo,

 

Start with a tween for the #blackPanel which runs only once at the beginning:

 

See the Pen vZMvWP by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

[Gumbo 2 Likes (Newbie)]

That's great. I thought there would be a way to do it with a callback function, but I suppose that would be the simpliest way to do it.

 

Thank very much,

Gumbo

[Carl 9,066 Likes (Superhero)]

Yes, you could use an onRepeat callback like so:

var tl1 = new TimelineMax({ repeat: 3, onRepeat:repeat });
tl1.to("#blackPanel", 1, { top: 140, ease: Power2.easeInOut });
tl1.to("#logo", 1, {left: 0,top: 0,width: 300,height: 250,opacity: 1, ease: Power2.easeInOut});
tl1.to("#copy1", 1, { left: 0, ease: Power2.easeInOut });
tl1.to("#logo", 1, {opacity: 0 }, "out");
tl1.to("#copy1", 1, { opacity: 0 }, "out");
tl.timeScale(4)

function repeat(){
  tl1.play(1)
}

 

I simplified the demo so that it is easier to understand

 

See the Pen Pjgvyj?editors=0010 by GreenSock (@GreenSock) on CodePen