Issue with stepped ease on repeat

[glassbean 4 Likes (Newbie)]

Hi There, I am not quite sure why the following code which simply repeats a timeline that plays a animated sprite twice works fine:
 

    TL = new TimelineMax({repeat:1});
    TL.stop();
    TL.set([spriteSheet], {x:0});
    TL.play();
    TL.addLabel("f1", "0")

    TL.to(spriteContainer, .1, {autoAlpha:1, ease:Sine.easeInOut}, "f1+=0");
    TL.to(spriteSheet, 1.5, {x:-(spriteWidth * spriteCopyFrame),ease:SteppedEase.config(spriteCopyFrame)});

but if I add another tween after the sprite stepped ease animation, the sprite is not reanimated on the repeat but the new tween is animated twice as per the

repeat:1

 

    TL = new TimelineMax({repeat:1});
    TL.stop();
    TL.set([spriteSheet], {x:0});
    TL.play();
    TL.addLabel("f1", "0")

    TL.to(spriteContainer, .1, {autoAlpha:1, ease:Sine.easeInOut}, "f1+=0");
    TL.to(spriteSheet, 1.5, {x:-(spriteWidth * spriteCopyFrame),ease:SteppedEase.config(spriteCopyFrame)});
    TL.to(beam, .5, {autoAlpha:.8, y:80, x:-35, scaleX:.35, scaleY:.35, ease:Sine.easeOut}, "f1+=1.9");

Ive tried resetting the the sprites x position with different methods but still it will not replay and seems to always hold on the first frame. Any help appreciated as Ive spent a few hours trying different solutions without success

 

 

[GreenSock 8,117 Likes (Superhero)]

I'm not quite sure I follow your question, but it looks like you've got some unnecessary code in there. Like you stop() and play() on the same tick (you can delete both of those lines as they cancel each other out). I also wonder if your issue is related to overwriting in some way, but it's very difficult to troubleshoot blind - could you provide a reduced test case in codepen just so we can see exactly what's going on? It doesn't have to be your real project - just something that shows the problem happening with as little code as possible. We'd love to help - it's just tough with a snippet of code that's not in context.

 

And are you using the latest version of GSAP? 

[glassbean 4 Likes (Newbie)]

Hey Jack,

Thanks for your reply. Ive stripped down the problem to its essentials. Ive attached a zip of the file for you to look at in its simplest

The loop should replay the whole timeline including the stepped ease on the sprite sheet but its doesnt it only loops the fade on the beam. If I remove the line of code tweening the beam, the sprite sheet is reanimated with the loop as expected. I just cant figure out why its doing this?
 

function doAnim() {

    TL = new TimelineMax();
    TL.stop();

    TL.set([spriteSheet], { x: 0 });
    TL.set([bg], { alpha: 0 });

    TL.play()
    /*--- FRAME 1 IN ---*/

    TL
        .to(spriteContainer, .1, { autoAlpha: 1, ease: Sine.easeInOut })
        .to(spriteSheet, 1.5, { x: -11400, ease: SteppedEase.config(38) }, "+=0.2")
        .to(beam, .7, {autoAlpha:.6, ease:Sine.easeOut}, "+=.5") // If i remove this line the sprite is looped
        .call(loopMe)
}

function loopMe() {
    console.log("loopMe");

    TL.set([spriteSheet], { x: 0 });

    TL.restart();
}

 

simpleSpriteLoop.zip

[Carl 9,066 Likes (Superhero)]

hmm, I don't see any issue on repeat. the animation plays the same each time. spritesheet moves left to right, beam comes in over and over and over

 

https://greensock.d.pr/uq4TDo

 

Is there something I'm missing?

 

Also, when GreenSock requested a CodePen demo, this is what he meant: 

 Much better than a zip.

[GreenSock 8,117 Likes (Superhero)]

Like @Carl, I'm totally lost. It's working exactly the way I'd expect based on your code. I see the sprite sheet looping fine, even with that beam autoAlpha tween in there. I'm also confused about why you're adding another set() at the end of the timeline on every single loop. 

 

I really want to help, but I don't understand the problem you're describing (the repeating is fine in all my tests). 

 

Also, your timeline code could be simplified to: 

TL = new TimelineMax({repeat:-1});
TL.set("#bg", { opacity: 0 });
TL.to("#sprite-container", .1, { autoAlpha: 1, ease: Sine.easeInOut })
    .to("#spritesheet", 1.5, { x: -11400, ease: SteppedEase.config(38) }, "+=0.2")
    .to("#beam", .7, {autoAlpha:.6, ease:Sine.easeOut}, "+=.5")

 

As Carl said, a codepen would be super helpful. 

[glassbean 4 Likes (Newbie)]

@Jack and @Carl Thanks a lot for your help. Your replies have prompted me to look at the files in Chrome and it works as you say, but not in Firefox, my default browser, the most recent version. The sprite part doesn't loop. Did you see it working in Firefox? Thanks for the tips. I will make sure to upload a correct codepen next time around.

[Carl 9,066 Likes (Superhero)]

not seeing any issues in FireFox either: https://greensock.d.pr/6WzrCl

[GreenSock 8,117 Likes (Superhero)]

Yep, I checked Firefox too and it worked exactly as expected.