Animation when Closing a Group Focus

Hey Bubblers,

I know how to animate opening a Group Focus (using workflows) but cant figure out how to do so when closing it. The Group Focus is pre-set to close when a user clicks away and doesn’t have its own event in the workflow editor. How can I select an animation or build a workflow for closing my group focus.

In my case, I’m working on a Hamburger Menu in my app header. When clicked, I’v animated the Group Focus menu to slide onto the screen rather than just appearing there. I’d like to implement the opposite animation effect when the user clicks away. For instance, if the menu slides down when opened, I want it to slide back up when its closed.

Any thoughts?

Welcome to the forums!

In my experience the only time you can achieve the out animation is when you click inside the actual focus group. I understand the UX you’re going for and to make it a tiny tiny bit better, I make the actual FG overlap the anchored element and fill it with a transparent group. That way when the user clicks the "button: again, they are clicking on the overlap group inside the focus group instead of on the page. I then add the hide animation to that overlap group, and style the fg contents in yet another group group.

If you want my unsolicited advice, as you can see it’s quite a few more UI elements and an extra workflow. Maybe more trouble than it’s ultimately worth. More processing and more likelihood of breaking for very little in added value to the user. If you’re as stubborn as me though, and you seek perfection, here’s an editor link and a preview.

2 Likes

Cheers Duke! I ended up just using a floating group rather than group focus. The menu doesn’t close automatically when the user clicks away, but the menu slides open and closed when you click the menu on and off.