[SOLVED] Is it possible to switch out text?

Is it possible to display a line of text, such as ‘Hello, welcome to my site’, and then after 3 seconds make that line of text change to a new line of text, such as ‘We hope you are happy’?

1 Like

Several ways to go about this…

Firstly you could simply have 2 separate text elements, the first one visible on page-load, and the second one hidden. Then after 3 seconds hide the first one and show the second one.

Alternatively (perhaps a cleaner option), is to use a custom state (text) with a default value of ‘Hello, welcome to my site’, and a text element set to display that custom state’s value.

Then after 3 seconds change the custom state value to 'We hope you are happy’.

1 Like

Thanks, I have created the custom state but can’t see how to show a different text message after 3 seconds? Is this done within the Workflow?

Yes, just add a 3 second pause in the workflow…

For example, if you want the text to change 3 seconds after the page loads, run a workflow on pageload with two actions - the first being a 3 second pause, the second being setting the custom state.

If you want the text to change 3 seconds after a button click (or some other action) then add the pause in the workflow for that action before setting the custom state value.

I have it all set up but I still can’t see how to set a custom state from within Workflow to show different text? The custom state is called ‘Headline’ and the default text is ‘test line 1’

Not sure how to show a new sentence? Also, I think with this solution we will get to the end of the Workflow and the text will stop rotating, whereas I need it to continuous switch from line 1 to line 2.

  1. The value of your text element must be your index’s Headline;

  2. Create a Workflow (On Page Load);

  • In your first step you will change the value of your index’s Headline to “Hello, welcome to my site”.
  • In the second step, you will create a pause of 3 seconds.
  • In the third step you will change the value of your index’s Headline to “We hope you are happy”.

As your text is linked to the custom state, every time you change the custom state, you change also the text. Hope it helps!

You set the custom state value in the ‘Value’ box of the custom state:

Also, I think with this solution we will get to the end of the Workflow and the text will stop rotating, whereas I need it to continuous switch from line 1 to line 2.

That’s a different issue entirely…

If you want to continuously cycle through a list of texts you’ll need to use a ‘do every X seconds’ workflow instead - and have a list of texts to cycle through (an option set would be the simplest way to create the list, as you can set a ‘position’ attribute as a number, then cycle through that).

Here’s a recent forum post asking the same question (it’s about changing text colour rather than the text itself, but the process is the same) - Need help changing a text colour every “x” seconds - Need help - Bubble Forum

Alternatively, perhaps a simpler option (especially if you only need to cycle between two texts), would be to use a custom state and a condition to display the text.

I.e. have a yes/no custom state (default value no) and use a do every X seconds workflow action to change the state value between yes and no (use current state value is 'No' to do that), and then just have a condition on the text element to display one text when the value is no and another when the value is yes.

You could do the same with a Number custom state if you need more than two options, by adding ‘1’ to the existing number, ensure you use conditional actions to make sure the number doesn’t go higher than you need it to (i.e. when it’s already on the top number, reset it to 1), but that’s a little more fiddly.

I just tried all three options outlined above and they all achieve the desired outcome.

No doubt there are other ways to achieve the same thing, but those are the simplest ways I can think of off the top of my head.

@rpetribu Thank you for explaining, this worked perfectly - BUT - after it has shown both lines of text, it no longer repeats. I need it to loop forever.

I have just seen @adamhholmes answer to this so I will try that.

Thank you @adamhholmes I will try this … I do think I will need 3 or 4 different lines of text so the Yes/No option wouldn’t work, but I will try the other idea.

1 Like

I didn’t know this :sweat_smile:

So it’s easy…

Create two CUSTOM EVENTs as showned below.

One called “Headline 1” and the other “Headline 2

image

Event “Headline 1”:

  • In your first step you will change the value of your index’s Headline to “Hello, welcome to my site”.
  • In the second step, you will create a pause of 3 seconds.
  • In the third step you will trigger a custom event → Choose “Headline 2

Event “Headline 2”:

  • In your first step you will change the value of your index’s Headline to “We hope you are happy”.
  • In the second step, you will create a pause of 3 seconds.
  • In the third step you will trigger a custom event → Choose “Headline 1

In your event “On Page Loads” you will only need one step:

  • In the first step you will trigger a custom event → Choose “Headline 1

Make sense?! :+1:

Yes, this is a very nice and simple solution … but oddly it stops repeating after it’s shown Event 1 twice, like this;

Headline 1
Headline 2
Headline 1

… then it stops?

I have no idea why (or how) it can stop because Headline 1 should progress to Trigger Headline 2.


I followed the instructions you gave and I was able to get the option set displaying but only if I chose to show :random.

If I chose show :all slideshows I was asked to then pick another thing or the text was red. I couldn’t figure out how to show the first option followed by the next and so on.

Hold fire, all of this is a waste of time because, like the slideshow, the text which is rotated does not show on mobile view?

Hummm, you are right… Circular reference… Bubble will not allow it…

So, there is another easy way…

  • In your first step you will change the value of your index’s Headline to “Hello, welcome to my site”.
  • In the second step, you will create a pause of 3 seconds.
  • In your third step you will change the value of your index’s Headline to “We hope you are happy”.

Every 6 seconds, Bubble will cal this workflow.
So every text will be displayed for 3 seconds.
Tested here. Worked fine.

2 Likes

Thank you for this workaround, it works but on page load it starts by running the 6 second delay, is there a way to get the first text to show immediately?

Yes.
In the conditional tab of your text, you can do:

If index’s Headline is empty
Text = "“Hello, welcome to my site ”.

1 Like

That’s it! Thank you for helping me … surprisingly tricky but great to finally have it sorted!

1 Like