Expand Animation Capabilities

In a world of flat web design, animation has proven to be all the more important. Animation is a great communication tool that can prevent cognitive overload in addition to providing delight to the end user.

The animation capabilities in bubble are a good start. But it would be awesome if there were more controls.

In particular the capability to change x and y coordinates from any trigger would be the best next step (in my humble opinion). Maybe also, to make the process of changing an item’s xy coordinates easier, you could create different states of items whereby you have position 1 and then position 2 (maybe even size 2) of the item. Maybe this 2nd state could just be another layer that’s managed in the elements tree. This feature alone would open up a lot of capabilities, for example being able to add side loading menus (eg. hamburger menu) and then if you could control the timing and even chain your animations together by triggering one after a previous one completes the opportunities then multiply. There’s lot’s of opportunity here and I could go on and on, but to me this would be a good next step.

Thanks for your amazing product!

Blake

2 Likes

+1 for this idea from me.
Context: I’m wanting an element to move up the screen to fill the available space when the available space is empty.

1 Like

@cowontherun You may want to check out the “collapse height when hidden” feature on the group element. It will allow for elements below to shift up and fill it’s space when hidden. You can even animate this effect if it’s something a user can toggle on and off.


Gaby | Coaching Bubble

1 Like

This is not working for me - do the elements below it have to be a group or have any special settings on them?
I can’t see any special settings on the elements below for this.

The elements that are being hidden should be in a group and that group is where you check “collapse height”. Elements below don’t need any special settings but keep in mind that if you have other elements at the same page level as the hiding group, and outside that group, the height won’t collapse because they’re in the way .

Oh I get it. So if i have 2 groups, 1 is on the left and 1 is on right at the same position, and I collapse the left one, it won’t collapse as the right 1 prevents this.

Yes, but a way to make that happen is to isolate the collapsing environment. Put the collapsible group inside another larger group with the elements below that are to fill the space. This larger group can stay on the left side and the right side won’t affect the collapsing group within. Of course, this all just depends on your actual layout.

So I never realized that floating groups (installable plugins) can handle the animation of xy coordinates. However all that’s missing from animation capabilities is the changing of dimensions.

1 Like