Forum Documentation Showcase Pricing Learn more

Simple Text Animation

Hi everybody.

I have created a simple text animation for the header of my app and it works perfectly ad then stops for no reason.

It seems like such a simple thing to achieve but I have struggled after spending a few hours on it now.

Here is quick video showing you the issue: https://youtu.be/6GPT_ZeRNW0

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.

Any suggestions would be greatly appreciated.

Thanks in advance :slight_smile:

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.

Editor
Preview

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

Seems to run smooth. Counted 5 loops no problems.

Hope it helps, cheers!

1 Like

@duke.severn thank you so much for your reply.

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!

It is honestly really appreciated :slight_smile:

No worries. Here is a “human” way to explain it:

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

Showing - Target > [ Workflow ] > Showing - Target

0 - 1 [ hide (null) show (1) ] 1 - 1
1 - 2 [ hide (1) show (2) ] 2 - 2
2 - 3 [ hide (2) show (3) ] 3 - 3

Easy. Then we have to make it loop back

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 :fire: We’re all learning here :wink:

I’d use the “Do every 5 seconds”

and set to every 15 seconds

and set the work flow like this.

Animate in Whatever / pause 5 seconds / Animate out Whatever / Animate in Whenever / pause 5 seconds / Animate out Whenever / Animate in Wherever / pause 5 seconds / Animate out Wherever

This flow takes about 15 seconds. Then it will restart to the beginning because you set it to do this every 15 seconds.

Hope this helps.

@privilet.info This is an interesting method as well, yet I was thinking the pause would hang any other action happening on the page… Can you confirm?

Hi @privilet.info.

Thank you very much for your reply :slight_smile:

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.

Thanks again @duke.severn.

I’m going to copy this flow now for one of my banners!

Hey everybody.

OK, so I have this nailed down and thought it would be best to do a quick video walk through so future bubblers can benefit.

Here is the link: https://youtu.be/7ba380F32G0

Thanks again for everybody’s help :slight_smile: @duke.severn & @privilet.info

1 Like

Sorry for late reply and good to hear you find the solution :slight_smile:

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.

Thanks for the tut. Moved thread to “tips” since this is mostly what this thread has become :wink:

This topic was automatically closed after 14 days. New replies are no longer allowed.