January 30, 2020 at 4:09 pm #438126
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.January 30, 2020 at 4:28 pm #438129
Brian RobertsonMember12 pts@brobertson4402
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.January 30, 2020 at 6:31 pm #438134
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.January 30, 2020 at 6:40 pm #438141
Adam CainMember22 pts@cainam
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:
- On Show, Hide this object (with a delay or a transition affect for the box)
- 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.February 7, 2020 at 2:07 pm #438656
Darrel SomozaMember208 pts@Klaatu
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?February 10, 2020 at 3:11 pm #438836
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.
You must be logged in to reply to this topic.