New Responsive: Transitions on height, width, margin

In our ‘going live’ post about our new responsive engine, some users asked us for the ability to add transitions on elements’ dimensions. We are happy to report that last week we added this ability, so now you can add transitions to a container’s width, height, and margin properties.

Some important usage notes:

  • This applies to containers in row, column, or fit-to-parent layout.

  • If a container is not fixed width/height, you can only add transitions on the container’s maximum and minimum width/height because these are the properties that control the element’s dimensions.

  • If the container is fixed width/height, a transition can be applied to that property directly

  • By fixed width/height in this case, I mean that the checkbox ‘Make this element fixed width/height’ in the Layout tab has been selected.

  • For ‘Max width/height’ transitions, an upper bound on the width/height must be set for the transition to show up. It cannot be ‘Inf’.


Wow. :astonished: This is amazing!


This is going to result in some seriously good looking apps :star_struck:

I already set up a sidebar that resizes smooth as butter :butter:


:smiley: :+1:

Great news :grinning:

This is awesome!

Radial menus, anyone?


Pure Bubble. Just margin transitions.



Endless possibilities!

Fantastic work!



ufff, saucy :diamond_shape_with_a_dot_inside: :diamond_shape_with_a_dot_inside:


@andrew.king, I noticed that margin transitions don’t seem to work with floating groups. Is that by design, or should I submit a bug report? The margin does change, but it’s not animated.


Aha! A bit of sleuthing in dev tools has revealed that margins are “faked” for floating groups (presumably due to their fixed position). It’s actually the inset (left, top, bottom, right) properties that are used for the “offset”. When I specified one of those properties for the transition in dev tools, it worked fine.

I therefore suspect it’s just an oversight. I shall submit a :spider: report.

1 Like

Oh COOL!!! Super excited about this :slight_smile:


Superb! May I ask how do you make it?

Awesome sleuthing! Thanks for that, we’re looking into it now.


Just deployed a fix, should be active soon!


Hi @andrew.king,

Transitions do not seem to work on Floating Groups although they are available in the editor.

If I manually edit the CSS seem to work fine, but does not seem to be applied to the Floating Group.

Please, have a look at it! Thanks!

1 Like

n00b alert… how can I make transition setting appear on groups with the new Responsive editor tab layout?

Sorry, it does seem to work in Floating Groups that are not REUSABLE elements, but not on floating REUSABLE elements.

You have to set your transitions in the bottom of the Appearence tab

hey, amazing effect, could you do a tutorial on how you achieved this please?

1 Like

@agence.webinti, @Rangduju, and others seeking additional info on creating the radial menu effect, I’ve posted a how-to in the Tips forum.

Hope it helps.

1 Like