Repeating Multiple Events

[Pieter]

Hey I'm new to using TweenMax,

 

There's one thing I've been doing but I'm wondering if there's a better way,

I often need to repeat a number of events... it's kind of like a movieclip in flash.

 

So in this example I'm trying some sort of Hanna Barbara style walkcycle.

I just call the function inside my timeline.

function walkcycle(timeline, element, repeats) {
    for (var i = 0; i < repeats; i++) {
        timeline
            .add("step")
            .to(element, 0.2, { bottom: -4, ease: Power2.easeIn })
            .to(element, 0.35, { bottom: 0, ease: Power1.easeInOut })
            .to(element, 0.55, { left: "+=55" , ease: Power0.easeNone }, "step");
    }
}

But I wonder if there's a better way using TweenMax methods? It works but it's not always ideal. It also breaks chaining.

[Diaco]

Hi Pieter 

 

you can use nested timelines with repeat parametr  , pls try like this : 

var masterTl = new TimelineMax();

function runTl(Repeat,elem){
  var tl = new TimelineMax({repeat:Repeat})
  .to(elem,1,{rotation:45})
  .to(elem,1,{x:45});
  return tl;
};

masterTl.add( runTl(1,"#elem1") )
masterTl.add( runTl(2,"#elem2") )

[Pieter]

Ah yes, much cleaner

 

That answers my question, however, in the code with my for loop, I use { left: "+=55" } to increment relative to the previous iteration. This doesn't seem to work when using the repeat property (it resets itself every time the timeline is repeated). This particular case it can be worked around easily since it's just a linear tween from start to finish, but imagine I used a different easing or timing. Is there a way to fix that or should I use a different approach?

[Diaco]

hmm , for relative motions your code is OK , but there's a point ; pls generate unique string as label in each loop ( already you're using same string "step" as label in each loop ) or use relative position parameter instead of Labels like this :

function walkcycle(timeline, element, repeats) {
    for (var i = 0; i < repeats; i++) {
        timeline
            .to(element, 0.2, { bottom: -4, ease: Power2.easeIn })
            .to(element, 0.35, { bottom: 0, ease: Power1.easeInOut })
            .to(element, 0.55, { left: "+=55" , ease: Power0.easeNone },'-=0.55');
    }
};