Glitchy collapse animation

Need help
1

Hi,

Getting this super glitchy animation when hiding & collapsing.

image

any way to fix it?

2

I have tested a similar setting but it works normally. I am assuming there is something else in your setup. Maybe share more how you set up these and we can help.

3

Unfortunately, Bubble has always been terrible at collapse animation.

It’s a shame, as I like to use collapse animation, but in the 5 years I’ve been using Bubble, I’ve never seen it work smoothly (at least consistently), so I generally avoid it in Bubble apps.

1 Like
4

This is completely true. Bubbles Native animations on the collapsing is terrible. It’s the worst collapsing I’ve ever seen on any framework in the existence of code/no-code. I still can’t believe it’s an issue. It’s the one thing that tells me “hey, your app is definitely built on Bubble”.

So… I made a guide to hopefully help you make better animations on collapses and what-not. Give me a few moments as I will edit this post with the YouTube link once it’s done uploading.

EDIT:

END RESULT:
WMPuCMQaUM

2 Likes
5

Three rectangles (we’ll call them info boxes) in one group.
Underneath that is another three rectangles (more info boxes) in another group.

Both nestled in one group.
This “parent group” has a layout of column.

Anything else that you would need? I don’t think anything else would affect it, but I could be wrong.

6

Yeah, I’m surprised a platform as powerful as Bubble is lacking something that simple.

7

Thanks for the video.

I think natively bubble is a lot better at the animations when dealing with simple things. I’ve got 6 cards moving, all with individual images, text, sub-text, and buttons.

8

This looks like related to the group’s being column layout and it is trying to hide/show at the same time, therefore, the messy behavior. I could avoid it by adding a delay between hide and show but it is still not practical.

I could also avoid it by changing the column layout to align to parent so the two groups (with 3 boxes in it) are actually in the same location. So, they actually don’t move when hiding and showing (they are at the same location).

This is the column layout behavior with your setup:
chrome_pBftXszy6O

And this is the align to parent, with exactly same setup. Better for sure.
chrome_AGX0JIWDM5

Probably, you need to play with the layout a little bit to avoid this. Good luck :wink:

1 Like
9

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