06-09-2020 13:49 PM - last edited 05-13-2022 10:25 AM
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):
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...
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.
Glad you appreciate it!
Have you already used it or are you planning to?
Have you had any difficulties using it?
Not always easy to understand how to combine all parameters (especially the Reverse one) to make a menu open and close using a specific animation...
Sorry to disturb you how to reset the component on OnVisible ? Set(cmpGalleryAnimation.Reset ; true) is not working ?
Thank you very much for the component !
In the OnVisible property of your screen put this code:
And set your ControlAnimator component's Reset property to this:
That should do the trick...
Don't hesitate if you have more questions... 😉
You have to make it yourself @arlgroup 😁
The ControlAnimator component is there only to animate your controls. So just created your menu placing icons and labels inside a container and then use the ControlAnimator component to animate it. If you encounter any difficulties animating it, don't hesitate to ask for help...