Jump to content
Search Community

Stagger problem

Iamattamai test
Moderator Tag

Recommended Posts

Sorry, I couldn't get CodePen to play this snippet so I had to host it myself here: https://www.eyedea.co/imgtest.html 

I suspect the base64 images were too big for it to process.

Anyway, could someone tell me why I am getting three different behaviors at the end of this short animation?

If you refresh it, you can alternately get a blank screen, arms down, or suddenly arms up - which is the last image in the series.

My preference would be for it to come to rest with arms down. I cannot understand why the arms suddenly jump up at the end.

I've tried every combination to stop it and I can think of and toyed with immediateRender but still get this unpredictable behavior.

Link to comment
Share on other sites

Hey Iamattamai,

 

The following function seems to work to put the arms down for me:

function armDown() {
tt = gsap.timeline()
tt
  .to(".g06", {duration: 0, visibility: 'visible', stagger: -.05})
  .to(".g06", {duration: 0, visibility: 'hidden', stagger: -.05},.05)
  .to(imageList[0], {visibility:'visible'},"-=.01")
};

To use reverse you'd need to create the timeline then go to .progress(1) and then .reverse() it.

  • Like 2
Link to comment
Share on other sites

8 minutes ago, ZachSaucier said:

Hey Iamattamai,

 

The following function seems to work to put the arms down for me:


function armDown() {
tt = gsap.timeline()
tt
  .to(".g06", {duration: 0, visibility: 'visible', stagger: -.05})
  .to(".g06", {duration: 0, visibility: 'hidden', stagger: -.05},.05)
  .to(imageList[0], {visibility:'visible'},"-=.01")
};

To use reverse you'd need to create the timeline then go to .progress(1) and then .reverse() it.

Thank you ZachSaucier, that seems to work. I don't understand the prior behavior, but will settle for any solution that works after hours of frustration.

Link to comment
Share on other sites

I haven't had a chance to dig into your example much, but I did notice that you forgot to return the timeline instances in your functions, so all you're doing in your master timeline is firing off function calls (not really building a master timeline with embedded animations). This might be better, and it'd allow you to control the entire thing as a whole: 

var tlmaster = gsap.timeline();
tlmaster.add(armUp())
        .add(armDown());

function armUp() {
  var tt = gsap.timeline();
  tt.to(".g06", {duration: 0, visibility: 'visible', stagger: .05})
    .to(".g06", {duration: 0, visibility: 'hidden', stagger: .05},.05)
    .to(imageList[imageList.length-1], {visibility:'visible'},"-=.01");
  return tt;
};

function armDown() {
  var tt = gsap.timeline();
  tt.set(imageList[imageList.length-1], {visibility:'hidden'})
    .to(".g06", {duration: 0, visibility: 'visible', stagger: .05})
    .to(".g06", {duration: 0, visibility: 'hidden', stagger: .05},.05);
  return tt;
};

That's not tested code - I'm just showing the concept. You had a reverse() call in there that could be a bit more complicated to replicate but not impossible. 

 

Anyway, it sounds like Zach got you what you needed, right? 

  • Like 2
Link to comment
Share on other sites

Yes, Zach got me working.

Thank you for the tip on the return - that might help going forward.

I missed that in the documentation.

Could explain a lot of things.

BTW, this forum ROCKS - everyone is so responsive and helpful - even on a Sunday - and follow-up is amazing.

 

Edited by Iamattamai
kudos
  • Like 1
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...