Smooth Element Resizing

[acaudill]

Hi everyone,

I am hoping someone can help me out here.
I made a sliding sidebar on my app and it is working great. The issue is the content to the right of the sidebar is resizing, but not very smoothly.

The way I went about this was to make the sidebar group hidden and then added a workflow on the arrow to animate the sidebar.

Does anyone have an idea how I can make the content resize smoothly?

Thanks!

[ranjit]

A transition effect for the width property on this group should do the trick.

[acaudill]

Thanks for the tip Ranjit.

I tried setting the Min and Max width transitions, but this didn’t have any effect.

I also tried setting a custom state on the group that changed when the sidebar was opened or closes and that didn’t work either.

Am I missing something obvious?

[Eugene_West]

Can I review your action from the editor’s side? Share with a link, please.

[acaudill]

Here you go.

Bubble Editor - Sidebartesting

[Eugene_West]

Here you go.

Bubble - Visual Programming

[Eugene_West]

If you want to add a transition effect to an element’s property, such as its width, you should set the state of that property, rather than the state of the entire element. In other words, Bubble.io’s animation feature applies the transition effect to the elements, not their individual properties.

[acaudill]

Thanks so much!
This works perfectly.