Jump to content
Search Community

Problem repeating a timeline with SteppedEase

Radar18 test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

@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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...