Hello, I have a group focus animation problem

I tried experimenting with different animation speeds like suggested but it still act weird.

I’d approach this a bit differently. Specifically:

  • I’d set each group focus to show on hover (not click). The way to do this is add a separate element that’s 1px by 1px that’s set to be visible when the main area is hovered. Then run a workflow when the 1px element is visible. (i.e., that’s the workaround to trigger an action on hover)
  • I’d delay the trigger to show the hover state by 50ms so that if someone slides their cursor across all of the items they don’t see the group float for all of them. The way to do this is to have each action trigger a custom workflow (which itself will show the group float) and then have the custom workflow delayed by 50ms and also set to only trigger if the 1px element is still visible

Hope this helps.

1 Like

Thanks for your input, I tried that approach before with no success.
I also tried combining hide/show with states and still random behaviour.

For UX reasons i need it to be on click, the hex-color is actually an input for users to adjust the palette generated from an image.
I think i have tried everything at this point, my conclusion is this animation library used by bubble is too buggy and unreliable to be used, its a shame really.

Can you walk me through the user experience / user journey that you’re trying to achieve?

In my experience, it takes a bit to really get the hang of the nuances of bubble, it’s animations, etc. So stick with it. Once you’ve done so the approach I recommend above (and many others) are entirely do-able - I’ve implemented the same in my app with great success.

I had a look at your app, i cant find any focus groups or anything that uses the expand animation but i still see animation errors. As for my UX decisions, i cant reveal. I get paid to explain this.


This topic was automatically closed after 70 days. New replies are no longer allowed.