Problem repeating a timeline with SteppedEase

[Radar18]

Hi there,

 

I'm trying to animate a spritesheet.

Checked through the forums and a few people recommend using SteppedEase, which I've got working without too many problems:

 

var tl1 = gsap.timeline();
tl1.to('.character1',3,{delay:3, repeat: 0, x:-3600, ease:SteppedEase.config(9)});

 

(See also attached codepen. Note that the spritesheet is really clunky. I just roughed it up quickly to try to illustrate what I'm trying to do).

 

The problem is, I want the spritesheet to animate once, then pause (or delay) for 3secs, then play again, pause 3 seconds, then play again. All up, repeat 3 times with a delay (say, 3 seconds) between each SteppedEase animation.

 

I'm using the following code:

 

var tl1 = gsap.timeline();
    tl1.to('.character1',3,{delay:3, repeat: 0, x:-3600, ease:SteppedEase.config(9)});

 

var tl2 = gsap.timeline();
    tl2.to('.character1',3,{delay:3, repeat: 0, x:-3600, ease:SteppedEase.config(9)});

 

var tl3 = gsap.timeline();
    tl3.to('.character1',3,{delay:3, repeat: 0, x:-3600, ease:SteppedEase.config(9)});

 

var master = gsap.timeline();
master.add(tl1).add(tl2).add(tl3);

 

Unfortunately, this code is not working. The animation plays ONCE ONLY, and then stops.

 

Hoping someone can explain what I'm doing wrong.

 

Thanks.

See the Pen xxyBmVe by Ben10 (@Ben10) on CodePen

[mvaneijgen]

You're are animating to something and the next time you animate to the exact same point, so nothing will happen because it already is at its end position. 

 

What I would do is create a timeline, with the repeats and the repeat delays build in, this way you don't need to repeat your code.

 

If you do want to change your animation each time, but have the same end point you could also use a .fromTo() animation to ensure it always starts from the beginning. Hope it helps and happy tweening! 

 

See the Pen KKGEEoW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Radar18]

@mvaneijgen,

 

Thanks for your reply and your help!

 

Yes, your solution works exactly as I wanted. I did suspect at one point that each animation may need to be reversed before the next takes place but I couldn't work out a way to do this.

 

I've got a lot more learning to do to become familiar with GSAP.

 

Once again, many thanks!