Repeating group cell animation

[davyddkelly]

Hi all,

I can’t work out at all how to implement an animation on a repeating group. It doesn’t seem to work whatever I try.

When I hover over a cell, I need a group to become visible on top (which will show expanded content in the repeating group cell) which animates by sliding in from the bottom to the top of the cell.

I can do the hover condition to make the group become visible, that’s easy, but I can’t work out how to do the animation functionality… have tried custom states, custom events to no avail.

Thanks!

[philip]

@davyddkelly

I can do the hover condition to make the group become visible

I am guessing you are using the conditional tab to mark the overlay group upon hover “This element is visible : yes”. Do you mean you need to connect a hover action to a workflow so that you can animate it instead? ie: Element Actions → Animate?

My first instinct would be to set a custom state upon hover and allow that custom state to control a “Do when condition is true” workflow with animation, but unfortunately this does not exist in Bubble from what I can tell. You may be able to the use the Toolbox plugin and achieve this effect with JavaScript that triggers a workflow (actually now that I think about it this is completely doable) — check it out: Toolbox plugin - collection of utility elements

If I find the time I’ll post back with an example using the plugin.

[davyddkelly]

awesome thanks! I’ll try out the toolbox plugin using JavaScript. That’s a good solution - it should work, thanks.

And yes you are correct that this doesn’t exist (currently) in Bubble, at least as far as I can tell (I tried doing it) --> " allow that custom state to control a “Do when condition is true” workflow with animation, but unfortunately this does not exist in Bubble from what I can tell. "

[dschmid00]

I’m reviving this 5 year old topic because I think this information is missing from bubble forms.

I edited philip’s function so that each element in the repeating group has a different name by adding the current cell’s index. - If you don’t do this javascript will stack the functions run 1 for each item in your repeating groups, and you’ll always get the last item in the repeating group as output.

use the Javascript to bubble element from the Toolbox plugin to trigger an event when your function is run.

Edit state when the javascript to bubble event is fired

Conditionally animate when saved state is equal to name or ID of the cell.