Can anybody suggest some custom code to get the words on my homepage to cycle through the same way the blue words at the top of Bubble’s homepage do, and then repeat from the beginning in an infinite loop? I initially submitted a ticket to Bubble about this in September, and they replied saying that I cannot do this at the moment owing to a known limitation. However, I recently noticed that Bubble themselves are doing this on their own landing page, so I reopened the ticket to ask how. The reply was that they had used custom code, which I have previously been told is out of their scope of support.
In the first instance, I had set this up with custom states, as follows:
With this setup, I’ve been able to achieve one cycling through of the words. However, I’ve had to disable the subsequent workflow that follows Step 20 in the screenshot immediately above, which is this one:
I have temporarily re-enabled this workflow on my test site, where you will see that the words don’t animate in the correct way in the first repetition of the cycle. Furthermore, the repetition happens only once; Step 3 in the above screenshot does not seem to have any effect.
As far as I can tell, I have already implemented exactly what was suggested to me in the reply I got from Bubble Support today. After my original ticket submission back in September, I similarly got the impression from Bubble’s reply that this setup was correct. If anybody is able to tell me what custom code would fix the issue, I would be hugely appreciative!
It looks like on their homepage it’s only like 5 words it cycles through…
I feel like you could put all the separate text elements in one Align to Parent group, hide all of them on page load.
Then make a custom event with the animate action for the first text element on the first event, and so on, then have your first even just schedule the 2nd event after X seconds, then have the 2nd one schedule the 3rd one, then the last one have it schedule the first one again
I have done this on a temporary page here. The problem is that Step 5 in the workflow ‘Custom Word 5’, which is meant to trigger the first custom event again, breaks the whole thing. If I delete this one step, then each of the words is shown in turn, but only once; I am unable to trigger a loop. I think this is what Bubble referred to as their ‘known limitation’, which they themselves have overcome using custom code.
PS I should add that my workflow ‘Custom Word 1’ starts with ‘Step 1: Animate Text – tribe’, then ‘Step 2: Add a pause before next action’. I found that if I did not include these steps then, again, the words failed to show at all. Including these two steps results in the words starting with ‘co-founder’, but only if I delete Step 5 in the screenshot above. (I hope that’s clearer than mud!)
Don’t do Trigger there should be a “Schedule custom event” action then you can do Current date/time + seconds (5)
So event #1 hides text#5, animates text#1, schedules event#2 5 seconds in the future, event#2 hides text#1, animates #2, scheduled event#3, all the way until #5 schedules #1
Ah! Ok, awesome. That’s solved one of the two problems I was having, see here. The words now cycle through on an infinite loop, which is really great. However, from the first repetition onwards, the words bounce up about 20 pixels or so before fading out. Have you any idea what might be causing this, and how to eliminate it?
Yea not sure what that’s about… what’s your container alignment? All of those in a Align to Parent container? Try settings a fixed height of your container group larger than the text’s height (including the text’s height from the animation)
It looks bugged like the animation isn’t happening properly, it’s doing the vertical offset first then fading out instead of at the same time… maybe try a different animation just to see if it’s doing the same thing
Also on the Bubble homepage they are hiding, animating in, on yours you are animating out, showing, then scheduling.
Sorry, my last message was a reply to your suggestion about the container heights. I am just trying what you suggested after that re. hide then animate in…
Also I noticed keep the first text visible on page load, then your workflow On page load schedule event 2 instead so there is text on screen when they first load in
Ok, sorted! Thank you so much. I had initially only changed the final step to ‘trigger’ the first workflow again, rather than ‘scheduling’ it. That helped me create the loop. But it seems that I needed to use this action throughout (from Word 1 to Word 2, Word 2 to Word 3, etc.) in order to stop that jump from happening.
Haha, I was literally just thinking I should try that next!! It does indeed look cool.
For now, I’m trying to work out what I’ve done wrong, as I’m trying to implement the solution you helped me come to on index-temp on the actual index page of the test site, and now I have no words at all.
Good luck