Jump to content
glassbean

Issue with stepped ease on repeat

Recommended Posts

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

 

 

Share this post


Link to post
Share on other sites

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? 

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.