I have set the animations to run based on a state and at the end of each animation is changes the state to trigger the next animation. This should create a simple animation loop that’ll look pretty on the site.
However, rather randomly the loop breaks about half way through and I can’t work out why.
Looks like a bug. Suggestion to file a bug report, something is happening with the loop as evidenced by the debugger crashing like that. Did you take a look at the console to see if you were getting an error?
Next time editor is faster for us to debug. Cool project so here’s a workaround to achieve the same effect.
Set two states on page, target and showing. Showing should be zero, target is 1 by default. All anim elements hidden on page load, find them in the elements tree. You can set the frequency on the “do every”.
In the end I just ended the loop with a final animation but I will certainly give this another go.
I’ve just spent the last 30-40 minutes really breaking down your animation sequence as I’m struggling a little to get my head around it.
You set it so that:
if showing is less than or equal to 3 then set target to 1
if showing is less than 3 set target to showing +1
Also in the 2nd workflow you have set it so that:
if target = 4 then set target to 1
I’m not questioning your judgement as you’ve got something working that I couldn’t but couldn’t that be covered in the original workflow if it was changed to:
if showing is less than or equal to 4 then set target to 1
For such a basic workflow I am really frustrated with myself for not understanding this… it’s just highlighting how much I am going to need to learn when it comes to bubble if I am struggling to understand something so basic.
Thanks again for your response and for taking the effort to create the workflows for me to see!
There’s a listener target and show should be equal or there’s an event triggered.
Forget the target = 1 at the start for a minute. The event animates whatever element is showing to expand out (if it’s 1, hide A, if its 2, hide B…etc.). It waits a bit (pause), then shows whatever the target is (if it’s 1, show A, etc.). It then reconciles the two variables so they are equal.
There is then a timer (‘do every’) that adds 1 to target if showing is < 3, let’s start
3 - 4 [extra step, set target to 1 if it’s 4] [ hide (3) show (1) ] 1 - 1
It will restart at showing 1, target 2 and loop forever. I understand now that I left a workflow in the timer that said set to 1 if showing is < 3 in the timer. If you lay out the values on paper, you’ll see that It effectively does nothing because it gets over-ridden by the following workflow that sets the actual value. I’d love to say that I left it in there to make sure that you were paying attention, but it was just that I forgot to remove it. Hope that helps clarify things a bit - I find that when I really have trouble working out some logic, I always just “compute” the results on paper and that usually clears things up.
Unsolicited advice: Breaking the loop is (probably) better from a performance aspect anyway, and if your user gets the same experience, I’d just go with that method.
Good question, as far as the machine is concerned it doesn’t matter. I’m not sure why I didn’t put it in the timer, but it’s essentially all the same workflow. And as I was writing “it’s essentially all the same workflow” I thought, then why did I split them and threw everything together in the same workflow (timer). It works. So thanks for that We’re all learning here
That was actually the way I tried it originally but when I tried this method the initial animation wouldn’t load for 15 seconds. Not ideal for a hero banner.
Sorry for late reply and good to hear you find the solution
Actually you can use my method plus do the exact workflow when ‘the page is loaded’. This way the animation will start immediately when the page is opened and it will redo again with the ‘do every 15 seconds’ workflow.