Would you like to add a bit of fun to your Power App, while giving your users a functional new items menu? Well, I have one for you to try out! Read on to find out more about it (or skip to the end and download the Power App solution with a demo app to test out the settings).
It's not the destination, it's the journey
So, what is this thing? Essentially, it's a Power Apps component of a floating action button that, when pressed will reveal a menu in either a quarter circle or vertical stack configuration. Of course, how it reveals that menu is the fun part.
In the x and y coordinates there are switch functions that relate to one of ten easing functions (which I found at easings.net) to animate the 'out' and 'in' travel of the menu items to their final destination. Selecting a menu item will trigger navigation to the respective screen (after letting the 'in' animation run its course).
Specifically in the download (located below) is a Power Apps solution containing a component library with the one component and a demo app to demonstrate some different animations as well as provide a slightly guided approach to testing what it can do.
Let's talk parameters
So here are the input properties of the component, along with descriptions and default values. Enjoy!
| Property | Description | Default value |
|---|---|---|
| X | The left-most edge of the component. Do not change this value as it will not work properly! | If( |
| Y | The top-most edge of the component. Do not change this value as it will not work properly! | App.Height - Self.Height - If( |
| Width | The width of the component. Do not change this value as it will not work properly! | If( |
| Height | The height of the component. Do not change this value as it will not work properly! | If( |
| Menu Items Table | A table of the menu items containing at least the following fields: ID (int consecutively from 1 to n for n items), Name (text, the name of the menu item, preferably less than 10 characters), Screen (screen, a screen to navigate to), SVGIcon (text, the code for an SVG icon with a single color of #000000). Optionally, it can include two hex color (text) fields: BackgroundColorHex and TextColorHex. | Omitted because it's really long; just check the component 😁 |
| Menu Layout | An integer that relates to the layout of the menu items: 1 - quarter circle, 2 - vertical | 1 |
| Vertical Layout Spacing | The spacing between items in the vertical layout in pixels | 24 |
| Icon Size | The size (both for height and width) of the icons in pixels | 80 |
| Grow Shrink Icon | A boolean property to toggle growth/shrinking of the icons as they animate | true |
| Grow/Shrink Easing Type | An integer value representing the easing equation for the horizontal motion of the menu going out. Values include 1 - linear, 2 - sine, 3 - quadratic, 4 - cubic, 5 - quartic, 6 - quintic, 7 - exponential, 8 - circular, 9 - back, 10 - elastic. | 6 |
| Animation Speed | The speed of the animation expressed in pixels per millisecond | 1.5 |
| Animation Delay | The delay between items starting their animation, expressed as a decimal-based percentage of the animation time per item | 0.25 |
| X Out Easing Type | An integer value representing the easing equation for the horizontal motion of the menu going out. Values include: 1 - linear, 2 - sine, 3 - quadratic, 4 - cubic, 5 - quartic, 6 - quintic, 7 - exponential, 8 - circular, 9 - back, 10 - elastic. | 1 |
| Y Out Easing Type | An integer value representing the easing equation for the vertical motion of the menu going out. Values include: 1 - linear, 2 - sine, 3 - quadratic, 4 - cubic, 5 - quartic, 6 - quintic, 7 - exponential, 8 - circular, 9 - back, 10 - elastic. | 1 |
| X In Easing Type | An integer value representing the easing equation for the horizontal motion of the menu going in. Values include: 1 - linear, 2 - sine, 3 - quadratic, 4 - cubic, 5 - quartic, 6 - quintic, 7 - exponential, 8 - circular, 9 - back, 10 - elastic. | 1 |
| Y In Easing Type | An integer value representing the easing equation for the vertical motion of the menu going in. Values include: 1 - linear, 2 - sine, 3 - quadratic, 4 - cubic, 5 - quartic, 6 - quintic, 7 - exponential, 8 - circular, 9 - back, 10 - elastic. | 1 |
| Button Fill Hex Color 1 | The first fill color in hex format | #00126b |
| Button Fill Hex Color 2 | The second fill color in hex format (if different from the first color this will create a vertical color gradient) | #00126b |
| Button On Hex Color | The on color in hex format | #ffffff |
| Button Border Hex Color | The border color of the main button in a hex value | #00126b |
| Button Border Radius | The border radius for the buttons in pixels | 40 (Self.IconSize / 2 should also work) |
| Button Margin | Value for the space between the main button and the edge of the menu gallery in pixels | 48 |
| Button Bottom Offset | Value for the space between the main button and the edge of the app in pixels (this is useful if you have something at the bottom of the app that the component will be over, like a mobile menu; otherwise, when the menu is expanded it will jump down to the bottom.) | 0 |
| Button Press Offset | The amount in pixels that each side of the button will shrink to appear depressed | 4 |
| Menu Item Fill Hex Color | The hex color value for the menu item (unless the BackgroundColorHex is used in the Menu Items table) | #00126b |
| Menu Item On Hex Color | The on color value for the menu items in hex format (unless the TextColorHex is used in the Menu Items table) | #ffffff |
| Show Text | A boolean value denoting if text labels are shown on the menu items or not | true |
| Shadow Hex Color | The color of the shadow in hex format | #00126b |
| Shadow Opacity | The opacity of the menu button shadow as a decimal (0-1) | 0.3 |
| Is Left Handed | Orients the menu for left handed users when set to true, right handed users when set to false | false |
| Background Overlay Hex Color | The color of the background overlay in hex format | #00000000 |
| Background Blur | The amount of blur to be applied to the background when the menu is active in px or rem | 4px |
| Fade Blur In/Out | A boolean property denoting if the background blur should be faded in/out in conjuction with the animation timer | true |
| Is Enabled | Boolean value denoting if the menu is enabled or disabled | true |
And here are the output properties. These are mainly used as a way for the component to easily reference its own state.
| Property | Description |
|---|---|
| Total Height | The total height of the menu item |
| Item Count | The number of items in the menu |
| Timer Started | A boolean property determining if the animation timer is started or not |
| Animation Started | A boolean value determining if the animation has started (going out) or not (going back in) |
| Animation Duration | The duration of the animation in milliseconds |
| Button Total Size | The size of the button including the margin in pixels |
| Is Full Size | A boolean property to denote if the component is full app size or not |
And there you have it!
So that is a very brief description of the component and a very long detailing of the properties. The best way to experience this thing is to download the solution below and use the included demo app. There are some preset animations to try out (just select the Settings cog in the upper right-hand corner and use the dropdowns to select them) as well Custom selections where you can try your own recipes.
Please feel free to comment with any questions, suggestions, recipes of your own that you like, or if you have found this useful!