Forum Academy Marketplace Showcase Pricing Features

Ability to animate Elements inside repeating group

After some testing I’ve realized there is no way to animate via workflow an Element inside a repeating group cell. Right now the only workaround is to use HTML blocks and write custom HTML/JavaScript for each cell.

What I am trying to do is trigger an animated group of content into view upon hovering each individual cell. You can see where I’m at with is in this public app:

I’m using the Toolkit plugin to accomplish the hover trigger on a HTML block, but the workflow can not trigger an animation on the “Group upon hover”.

The closest I’ve been able to do for something like this is to play around with the transitions tab in property editor and transition in/out background style. This is obviously quite limiting because it’s more transitioning properties than it is animating elements, and some properties might not apply for the effect you’re going, but just to throw this example out there, you can see what I’ve done here by transitioning the background style of a group:

Preview: https://forum_app.bubbleapps.io/version-test/rg_hover
Editor: https://bubble.io/page?type=page&name=rg_hover&id=forum_app&tab=tabs-1

1 Like

Hey @philip I have a suggestion, although I have not experimentet with it yet. There are two approaches, test them according to performance requirements. I recommend pure JS rather than jquery if possible, especially when dealing with searching for DOM elements.

Approach 1: Use a custom JS code inside each repeating group, that adds an ID to each element. If the element that gets tagged is way too “deep”, just chunk up some levels using .parents()[InsertNumberOfLevelsUp]; . Then run a custom JS function on page level (from workflow / html block), that executes animation on said element ID.

Approach 2: Use a custom HTML block code with a div containing a dynamic ID inside each repeating element <div id="animateThisIDsomedynamicdatanumberfromYourDB88"></div>
Then run a script on the loaded page that will step up to the root element for each element you want to animate and add another id tag there, let`s assume you need to step up 4 parent tags.
var findElement = $(’#animateThisIDsomedynamicdatanumberfromYourDB88’).parents()[4];
findElement.id = “toplevel” + findElement.id; I still add the original ID, because the number of the element is stored there

Approach 3: Similar to approach 2, just use custom HTML data attributes for selecting items. Can be used for animating either ONE or multiple. I`m just copy pasting some examples here to give you the picture.
F.ex.: $("[data-test]")

LIST OF ELEMENTS var elem = document.querySelectorAll(’[data-company=“philipscompany”]’)

GET FIRST ELEMENT with the value: var firstElem = document.querySelectorAll(’[data-company=“YourCompany”]’)[0]

TARGETING ID first then data (more performant on long lists) document.getElementById(‘someUniqueID’).querySelectorAll(’[data-company=“philipscompany”]’)

Bonus (possibly the best): Programmatic selection.
First, add a data tag with the value in the tag

In page or global app JS code:
$.expr[":"].hasData = $.expr.createPseudo(function (arg) {
return function (domEl) {
var $el = $(domEl);
return $el.is("[" + ((arg.startsWith(“data-”) ? “” : “data-”) + arg) + “]”) || typeof ($el.data(arg)) !== “undefined”;
};
});

To execute when need to animate:
$el.filter(":hasData(‘foo-bar’)").stepUpNumberofDOMnodes(4).runMyanimationScript(explodeAnimation);

I`m assuming you have some general JS skills, if you run into issues, let me or @mishav know. If you have time to make a tutorial to help other users it would be great, I just dont have time at the moment :frowning:
Add your own custom animation sauce script :slight_smile:

Let me know if any of these approaches work well, or if you test which ones perform best on a chrome timeline test.

Good luck!
-Gurun

2 Likes

Use this as a guideline for performance:

And this as a reminder/warning if you have complex structures or long lists: