Animate reusable elements

Is it not possible to animate reusable elements? The reusable element is not accessible in the list of elements in the animation action

Yes, it’s possible. The only thing is that you animate instance of resuable element, i.e. element that is placed on a page, not a reusable element itself. If you have RE named “Header” and put it on a page as “Header A” it should appear as a target for animation action.

At least you always have an option to put it into standard group and animate that group instead, though again you need to place this group on a page first.

Yes that is possible but I don’t think it’s possible to reference the reusable element in the animate action from within itself.

For example, clicking an “x” button in the reusable element to animate the entire reusable element I don’t think is possible

I need the same solution, Clicking on cancel or cross icon inside my reusable element must animate the closing animation I want to put into my popups, As the RE itself is placed on the page, I can’t reference it in the animation elements list

Did you find a solution? My only solution requires JS and it adds clunk and extra work to maintain.

Group the RE, have the RE set as always visible, then apply the animate action to the group instead.

1 Like


You can use the hide action and then replace with animate, it works

But be careful, some alternative solutions like the mentioned by @geovanevasconcelos2 and others workarounds used over the years can “break” at any time, as they were theoretically not documented as supported and the Bubble team already mentioned something about this at some point in the past.

Examples such as inserting expressions that validate the hover of elements in workflows (not natively supported but can be used) have also been warned that they can “break” at any time.