Transitions - Not Working!

[sam14]

Is anyone else seeing an issue where Transitions seem to be completely non-functional?

I have tried a zillion different combinations including testing on different elements (icons, groups, text, etc), different properties (size, width, height, color, etc), different timing, and different curves (ease, linear, etc).

I end up seeing absolutely nothing different than without the transition.

Anyone else seeing this? Maybe I’m doing something wrong, but I cant think of what it would be.

Below are screenshots of how I have this set up…

[sudsy]

There does appear to be an issue with icon size transitions on button elements. For me, the size does change, but there’s no animation. Other properties - e.g. width, margin, etc. - seem to work just fine. I use them in a number of places on various elements.

What’s the original size of your icon? You should definitely see it change on hover, even if the smooth transition is not working.

EDIT

I tried a regular icon element, and using a transition on the width and height might be a work-around since the icon grows in size as the icon dimensions change.

EDIT 2

Better yet, use a padding transition on all sides of an icon element. That way, the icon dimensions won’t have to change…

[jonah.deleseleuc]

Normally SVG width, height and font-size are transitionable CSS properties. I’m not aware about how Bubble implements icons in buttons - if it’s not working I suspect the icon may be appended via JavaScript, which forces a re-render thus no transition can be applied.

[sam14]

I’ll try the padding idea. Thanks. - I wasnt able to make any of the transitions work. Color, size, etc… But I’ll try the padding idea.