13-may-2022 update: added 'AnimatedHamburgerMenu.msapp' file to show how to animate a hamburger menu using the component
Hello #PowerApps community...
I am glad to present my ControlAnimator component which will allow you to add some nice animations to your #PowerApps applications.
Here are a few examples of what you can achieve with it (and it's just the start because I'm sure you will come up with some other great ideas):
And this:
What does it do?
Well, in fact the component generates a floating number value between a StartValue and an EndValue within a specified number of Steps. These numbers are generated using ease-in and ease-out functions provided by Robert Penner on his site
What are the animations provided by the component?
Here is the full list of animations you can generate with the component:
What are the component's properties?
Here are all the properties for this component...
Input properties
Output properties
How do I use it?
Let's say you want a gallery's width to animate from 50 to 240 pixels. Here is how you can do it:
If you want your animation to speed up a little, play around with the Steps input parameter and lower its value to 20 or even 15 for instance.
What's in the attached files to this post?
There are two files attached to this post:
Now it's your turn to play!
And tell us here in the post how you used the component and show us the animations you made up with it! ❤️❤️❤️
If you find any issues to the component or wish to propose new features, please do so on Github right here (and have a glance at my other components 😉: e-gallis/PowerApps.
@R3dKap How do you combine the parameters to make a menu open and close as per your menu gif. I'm trying to replicate this functionality and have partially made it work as long as the user doesn't click the hamburger button until after the menu is fully opened or fully closed. Can you explain how you did that?
@tfahlman add a boolean output property named OnAnimationEnd to the ControlAnimator component and set its default value on the properties panel of the component's definition to this:
t > d
Then on your app if you add a hidden toggle which default value is ControlAnimator1.OnAnimationEnd, using the OnCheck event you will be able to do some code once the animation has ended.
I'm sorry I can't find the app where I featured the opening and closing hamburger menu above...
Hope this still helps...
@R3dKap , I've been struggling all day to get the hidden toggle to reset the ControlAnimator.Animate property after the ControlAnimator.OnAnimationEnd fires. I'm able to get the menu to expand with the animation, but not to collapse. I'm using a hamburger icon in my menu to control whether the menu is open or not (with a boolean MenuState output property for use with the boolean ControlAnimator.Reverse input property), then following your instructions on using the ControlAnimator to change the width. Can you explain how to get the ControlAnimator.Animate property to reset once the ControlAnimator.OnAnimationEnd fires so that ControlAnimator.Animate is set to true the next time a user selects the hamburger icon?
If it helps any, I'm using @RezaDorrani 's Left Navigation component as my starting point. Thanks!
Hi @rebornScholar86,
I've just updated the post to add a small sample app to show how to animate an hamburger menu using the ControlAnimator component.
Don't hesitate if you encounter any difficulties... 😉
Cool
Hi, these animations are all brilliant, i have implemented the flyout hamburger menu in my app and your solution is much better than the previous solution i was using so thanks for that. The issue i'm having is that i have multiple screens, all with a hamburger menu and to avoid duplication, i have them all referencing the same cmpControlAnimator.
So all of their widths are set to cmpControlAnimator.Value like in the sample which works fine on the screen where the cmpControlAnimator is sat. However, for all the other screens, every time i open the app, i have to remove the cmpControlAnimator.Value code from the width and re-type it back in. This is every time i open the App, which is a bit annoying, especially as i have 12 screens and am still developing the App. I just wanted to see if you knew why this happened and if there's a workaround other than having a cmpControlAnimator on each screen?
Just as an aside, i do have my hamburger menu saved as a component, whilst the cmpControlAnimator is stored in a different component. I have tried setting the hamburgermenu width to a variable populated by the cmpControlAnimator.Value instead, but this didn't seem to work. Any help appreciated.
Hi @Anonymous,
Referencing a control that is outside the current screen is not recommended (as some controls might not be instancied if a screen hasen't been showed yet). That is why I put a ControlAnimator component on each screen I need it and I highly recommend you do the same... 😉 The thing you can do though, is to use global variables to set the ControlAnimator properties equally on each screen where it will be used. That way, if you change a global variable's value it will have an effect on all ControlAnimator components on all screens...
About using your cmpControlAnimator component's properties inside your hamburger menu component, it is totally feasible. To do so, I recommend you use properties created in your hamburger menu component to retrieve values from your cmpControlAnimator instance. See what I mean?
Do you need any more help?
Hi,
Thankyou for your quick response, it's much appreciated. Yes, after i wrote the message i decided to put an instance of the controlanimator on each screen as it made more sense. That seems to work perfectly now and is much quicker than using a global variable.
I have a separate issue i'd like you to help with if that's okay and that's the varMenuOpen variable. For some reason it's always set to false when my nav bar is open. And then true when it's closed. I've tried numerous code changes, such as setting the code Set(varMenuOpen, Not(varMenuOpen)); on either the OnVisble of the screen, or when clicking on the button on my homescreen, but regardless of what i code, varMenuOpen being false seems to mean the nav bar being open and causes great inconsistencies.
I'm sure it's something simple i'm doing wrong. Willing to provide a video/code sample if what is say isn't clear.
Thank you
Hi @Anonymous,
Sorry for the delay...
I think that at the time I named my variable varMenuOpen when in fact it should be named varMenuClosed... 😅
Except for the difference between the variable name and its value do you have any issue with the menu: does it work fine?
Ha, makes so much sense. I've changed all the variables to varNavBarClosed now, but still getting issues. I think i've tested so many different things that i've got muddled. I've tried stripping it back to your sample and followed notes previously in this chat, but still not getting it to work correctly soon.
I was wondering if you could help with my current code, which is noted below:
So at the moment i have a homepage which navigates to one of 8 screens.
So on the OnSelect event of the button on the homepage, i have the code: Set(varAnimateMenu, false); Set(varAnimateMenu, true); Set(varNavBarClosed, Not(varNavBarClosed)) whilst it navigates to screen1.
On Screen 1:
OnVisible = UpdateContext({locResetAnimator: false}); UpdateContext({locResetAnimator: true}); Set(varNavBarClosed, Not(varNavBarClosed))
On that screen, there's the AnimatorComponent called cmpNavAnimation
For cmpNavAnimation:
Animate = varAnimateMenu
Reset = locResetAnimator
Reverse = varNavBarClosed
Then i have a button which shows or hides the navigation bar which has:
OnSelect = Set(varAnimateMenu, false); Set(varAnimateMenu, true); Set(varNavBarClosed, !varNavBarClosed);
And the Navigation Bar itself is a gallery stored in a separate component with multiple buttons for navigation, these buttons have:
OnSelect = Set(varAnimateMenu, false); Set(varAnimateMenu, true); Set(varNavBarClosed, Not(varNavBarClosed));
The width of the gallery is then set to the value of AnimatorComponent called cmpNavAnimation.
Appreciate all your help