Looping and then stopping an action

nscott8678 Community Member Posts: 14
I have eight coloured boxes. I want to show Box 1 for one second, hide it, show Box 2, hide it, show Box 3 and so on until all eight boxes are cycled through. Once the eighth box is displayed, I want to hide it and then repeat the process by showing Box 1 again. It's a faux animation of sorts. I want to trigger the animation on and off.

I have achieved this by grouping my boxes in an action group and it works well. The action group is called and the boxes 'animate' endlessly. HOWEVER, my problem is that the 'animation' continues running when I run another action group. I can still see the boxes animating. I need to be able to stop the animation. I have tried hiding the action group, but that doesn't work.

I know I could create an animated .gif, but the boxes are very carefully placed on the workspace so it would be difficult to get placement and size correct.

Any suggestions on an clean solution? This is an action I might want to use again and again on other projects, so I'm keen to learn how it can be done.


  • brobertson4402
    brobertson4402 Community Member Posts: 24
    You will need an action in your 'animation' actions that tests for the condition that stops the sequence. Perhaps a variable that is set when 'I run another action group' that can be used as a condition in your hide/show actions.
  • nscott8678
    nscott8678 Community Member Posts: 14
    Thanks Brian, that makes sense.

    I was thinking in a similar way to that. It's a little clunky, bit it works. I basically created a switch using a variable to start and stop the animation.

    I'm keen to hear if others have an alternative solution for future reference.

  • cainam
    cainam Community Member Posts: 361 ♦ Idol ♦
    I'm not positive from your description exactly how you have it set up - if you shared the page it would be helpful.

    If I was creating this from scratch, I'd probably have the actions on each box.  (have all the boxes initially hidden, with a button that shows box 1, or just have box 1 initially visible).  Then have an action on box 1 (On Show, Hide this object) with a delay set if you prefer.  On that same box 1 have another action (On Hide, Show box 2).

    Then repeat these actions on the rest of the boxes:
    1. On Show, Hide this object (with a delay or a transition affect for the box)
    2. On Hide, Show box #
    What is nice about this setup is that each action is tied directly to the previous action, keeping everything timed nicely.

    Then same as Brian mentioned, make all these actions conditioned so that you can hide all the group of boxes with one action in your next action group, and modify the variable to something else so the actions don't fire.  (and if you want it to start going again, have another action that changes the variable back to the original value, and 1 more action to show box 1.
    - Adam Cain
  • klaatu
    klaatu Community Member Posts: 988
    This can be accomplished fairly straight forward with GSAP. Do you want the colored boxes all in the same place so it looks as if the box is changing color (or contents) or do you want them spread out in say, two rows of four?

    Also, just to clarify, you want this set up so that if any other action is called it will pause or stop the looping boxes? If so, do you want the looping box that was currently showing to remain or disappear?
  • nscott8678
    nscott8678 Community Member Posts: 14
    Thanks everyone for your input.

    Adam, yes that's essentially how I created it using an On Show Hide sequence for each box. When the last box is hidden, the first box is shown, creating an endless loop.

    Darrel, I have not heard of GSAP. The boxes are spread out in one row. Yes, I want the animation loop to be hidden when another action occurs.