Resolving Lag When Switching Custom States in Bubble

Need help Responsiveness
1

Hi everyone,

I am currently creating my first webpage using Bubble and I am facing an issue with the responsiveness of some elements. On my page, users can navigate through various categories, each opening a “new page.” To enhance user experience, I utilized custom states to show and hide different elements.

Capture
Capture429×616 30.8 KB

capture1

However, when I use the button to change the page state, making the desired element visible while hiding others, there is a noticeable lag, which disrupts the user experience. Initially, I thought the lag was due to the background image size, so I reduced its size significantly, but the lag persists.

If anyone has any suggestions or solutions to resolve this issue, it would be immensely helpful. You can access my page here to see the issue in action: https://simplixio.com/ (the lag occurs when you use the buttons on the sidebar menu).

As this is my first post on this forum, please let me know if I missed any important details.

Thank you in advance!

2

You can add animation transition for those groups , it’ll make the lag look seamless

3

Thank you for your answer, I tried to use this trick. Unfortunately this didn’t solve the problem. The animation started instantly while the background image and some of the elements took some time to arrive. This led to a strange animated black screen for a second

4

For animations to cover loading processes, you want your loading state to be default yes, and when everything is done, then turn that state to no.

When that state is on no, then “animate” the element to fade out or something. This is the best way to cover an asynchronous process.