Can I Display Data in a Repeating Group every 5 seconds?

Rather than use the image slideshow for my home page I was hoping to just display data in a repeating group every 5 seconds so that I could make some use of the keyword juice for SEO purposes.

But this either won’t work fluidly or won’t work at all.

I’m guessing that it can’t work this way where you set it to loop? Things I’m trying in the Workflow screen:

Hide > Show
Set State and change list > Set state and change list
Animate > Animate
Display List > Pause > Display List
Set State and list > Pause > Set State and List
I’m also trying lots of Do Every seconds and setting them to 5 seconds, 10 seconds, 15 seconds but that definitely doesn’t work.

Set State and List > Pause > Set State and List would work perfectly except Pause pauses all actions on the page, not just that workflow’s actions, which means User can’t click my login or sign up buttons until one round of the workflow ends.

If there was a way to pause a different workflow, I could set the login button onclick to pause the repeating group workflow and open the login modal.

Try Schedule a custom workflow event, instead of pause. It initiates a different workflow, so you’ll need to think more around event-based logic.

1 Like

Did you ever get this working?

Yes. You can see it here on the landing page https://manualhq.com. Where I ran into issues was trying to get the heading to synch with the repeating group. That’s held together precariously with tissue and spit. If sorta what you’re after I can have a look at my set up later.

@cowontherun Would you mind explaining conceptually how you got the defined amount of pause to work fluidly?

My use case is similar. I’m using a repeating group for a (seemingly!) very simple chatbot that follows a “script” and I need a controllable pause between each step of the script. Think of a normal texting app. Instead of my chatbot spitting out three “texts” instantly, I’m trying to control the pace so the UX is: chatbot is typing, show chatbot text, chatbot is typing, show chatbot text, etc. so the user follows along like a normal texting conversation.

I think that’s actually what I’m looking for, ie, my user doesn’t need to do anything until one round of the workflow ends, ie, after the chatbot works through its current script, the last step of every script is to ask the user for input, then based off that input, another round/script begins.

Did you end up using the Set State and List > Pause > Set State and List method to achieve your result? (which is slick btw!)

I tried using custom states with workflow pauses, but the front-end quickly gets out-of-sync with the backend and the result is definitely not fluid, ie, pauses are inconsistent or skipped altogether.

I don’t think my method is good for you, me or anyone! Basically in the end I went very simple - in the workflow I did event ‘When every 7 seconds’ with the action to animate item 1. Then I did a second event ‘When every 7 seconds’ with action to animate item 2. I did this on the title (item1) and the top repeating group (item2) on the Bubble demo site manualhq.com home page (note this demo site will be deleted in 2 days). As you can see it is still very slightly out by a nanosecond.

lol I have that feeling about most of my own “solutions”! Thanks for replying though, it is still helpful!

I couldn’t detect the nanosecond difference on your site…until I let it run a few minutes. It seemed as if the mismatch grew systematically. Barely noticeable at first, but after a few minutes, a difference of a second or more between the two. Just FYI, don’t know if you were aware of that, but I think it gets back to the core issue I’m encountering. My app has similar behavior, first round or two looks OK but the timing increasingly gets out of sync.

At the end of this post, @josh describes how Bubble “fakes” the frontend, then syncs it “later”. I can’t figure a way around this discrepancy for situations like ours where specific timing is necessary. In essence, trying to outfake Bubble’s little trick. I’ve spent two weeks on this and still don’t have something usable.

Ha Ha. Yes I’m very aware. Just remember though that Users aren’t staring at our sites like the hawks that we are. A glance, a couple of seconds, maybe a pause while they look, then they are off glancing at something else. Especially if it’s a landing page with marketing material on it. People are skimmers of content so I’m a firm believer that if it’s kinda close it’s probably good enough.

Maybe you could try CSS animations instead for your use case.

Just put the class styles in the script box in Settings, enable your html tags on elements, and put the class on the element.

I did that on a test site making a graphic or group fly in from the left and then right as the User scrolled down. The main page itself had minimal text and sometimes no text at each scroll down so when the graphic flies in, it has the main focus. As it’s triggered by scroll, it’s a more reliable trigger than Bubble’s x seconds plus looks extra great on mobile. I saw this done on the home page of a commercial web app by some company and just copied it but can’t remember who it was now.

Agreed. And thanks for the CSS suggestion and link, I think I may be able to use it to solve another less-invasive problem. My only hesitation is Bubble’s reminders that it doesn’t support custom CSS and fear that it will break with a future update :sweat_smile:

FWIW I may have solved my timing problem by adding a UNIX time stamp (to a simple list) at almost every step of my workflow so I could study/address the delays. The UNIX time stamp is in milliseconds. I have a total of 1700 milliseconds of pauses added to each round of my workflow and I’ve gotten it to where it pretty consistently executes in 1750 +/- 10 milliseconds, so I guess the 40-60 milliseconds is just the ‘normal’ processing time of the workflow steps. Still doesn’t look exactly the way I want but the timing issue appears solved…that or the timestamps themselves are forcing the issue, who knows!