[Solved] How to trigger workflow animations on hover

Need help
1

I’m trying to trigger an element to animate when the user hovers over a different element, and can’t figure out how to make this work. Anyone know a solution?

Here are my solutions that both solve 1/2 the problem, but I can’t seem to get either to solve the full problem (feedback appreciated):

  1. I can use conditional logic to show/hide the element, but I’d prefer for it to animate in which looks more polished and professional. I only know how to trigger these animations in workflows and don’t know if there’s a way to do so from the conditional logic section.

  2. I thought I might be able to do this by creating a custom state, but I can’t figure out how to set a custom state’s value when someone hovers on an element (which makes sense since the fact a user hovered over an item likely isn’t passed from the client back to the server where custom states are stored).

Any know a way to do this? Thanks!

3 Likes
2

Hey @sridharan.s I’ve been thinking about how to do this too! Your post gave me the idea to have three elements:

  1. Hover Button
  2. Animate Button
  3. Hidden Button

I set the Hover Button and the Animate Button to be visible on page load, and the Hidden Button to be hidden on page load. Then I set a condition on the Hidden Button which is “When Hover Button is Hovered, this element is visible”. Then in the workflow I created a ‘Do When Condition is True – Every Time’ (Hidden Button is visible) --> Element Actions --> Animate: Animate Button (Shake)". I think it seems to work as it should but double-check for sure!

Preview:

Editor:

8 Likes
3

Nice work @fayewatson! Yes, this definitely solves the problem. Creative solution. I like it!

1 Like
4

Glad to hear!! Thank you! :slight_smile:

5

For anyone interested, I think this also works to show a Group Focus on hover. So, the only difference you would make is that you’d have the conditional formatting on the Hidden Button to be:

“When Hover Button is hovered or GroupFocusA is hovered --> This element is visible”

And two events in the workflow, with the first being ‘Do When Condition is True – Every Time’ (Hidden Button is visible) --> Element Actions --> Show ‘GroupFocusA’. Then you’d have another event in the workflow which is ‘Do When Condition is True – Every Time’ (Hidden Button isn’t visible) --> Element Actions --> Hide ‘GroupFocusA’.

8 Likes
6

Someone should create a post about that (the Group Focus one), as that question gets asked a lot.

2 Likes
7

@fayewatson @vega.andrew The suggestion works for the GroupFocus.

Just made the changes to the workflow and it works without a problem. Thanks @fayewatson!

1 Like
8

@vega.andrew Good idea!

@raymond Awesome!! :smiley: No problem at all!

9

Love it, thank you!