Skip to main content

Notifications

Control Animator

R3dKap Profile Picture Posted by R3dKap 1,594

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):

ControlAnimatorSampleHamburger.gif

And this:

ControlAnimatorSamplePopup.gif

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 ease-in and ease-out?
Ease-in and ease-out are the smooth accelerating or deccelerating animations that are often seen on web sites or mobile applications:
  • Ease-instarts slowly from the StartValue and accelerates until it reaches the EndValue
    ControlAnimatorEaseIn.gif
  • Ease-Out: starts at max speed from the StartValue and deccelerates until it stops at the EndValue
    ControlAnimatorEaseOut.gif
  • Ease-In/Out: starts slowly from the StartValue and accelerates until it reaches half-way and then deccelerates until it stops at the EndValue
    ControlAnimatorEaseInOut.gif

 

What are the animations provided by the component?

Here is the full list of animations you can generate with the component:

  • SimpleLinear (no acceleration)
  • CubicEasingIn (cubic acceleration)
  • CubicEasingOut (cubic decceleration)
  • CubicEasingInOut (cubic acceleration/decceleration)
  • QuadraticEasingIn (quadratic acceleration)
  • QuadraticEasingOut (quadratic decceleration)
  • QuadraticEasingInOut (quadratic acceleration/decceleration)
  • QuarticEasingIn (quartic acceleration)
  • QuarticEasingOut (quartic decceleration)
  • QuarticEasingInOut (quartic acceleration/decceleration)
  • QuinticEasingIn (quintic acceleration)
  • QuinticEasingOut (quintic decceleration)
  • QuinticEasingInOut (quintic acceleration/decceleration)
  • ExponentialEasingIn (exponential acceleration)
  • ExponentialEasingOut (exponential decceleration)
  • ExponentialEasingInOut (exponential acceleration/decceleration)
  • SinusoidalEasingIn (sinusoidal acceleration)
  • SinusoidalEasingOut (sinusoidal decceleration)
  • SinusoidalEasingInOut (sinusoidal acceleration/decceleration)
  • CircularEasingIn (circular acceleration)
  • CircularEasingOut (circular decceleration)
  • CircularEasingInOut (circular acceleration/decceleration)

 

What are the component's properties?

Here are all the properties for this component...

Input properties

  • StartValue (number) = starting value
  • EndValue (number) = ending value
  • Steps (number) = number of steps between StartValue and EndValue
  • StepWaitTime (number) = in milliseconds, time to wait between each step of the animation
  • AnimationType (text) = animation function you wish to use (from the ones listed above) (use the output property AnimationTypeEnum to set the value)
  • Animate (boolean) = when true, starts the 'animation' by generating the resulting values (in the Value output property) between StartValue and EndValue
  • Reverse (boolean) = when true, animation starts from EndValue and proceeds to StartValue
  • Reset (boolean) = when true, resets the output value to the StartValue (if Reverse is false) or to the EndValue (if Reverse is true)

Output properties

  • Value (number) = generated number between StartValue and EndValue, using the math ease-in, ease-out function specified by the AnimationType input property
  • AnimationTypeEnum (record) = enumeration of all availables animations (use it to set the AnimationType input property of the 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:

  1. Put a ControlAnimator component on your screen and name it cmpGalleryAnimation (and set a background color to it)
  2. Set its StartValue property to 50, its EndValue property to 240 and its AnimationType property to cmpGalleryAnimation.AnimationTypeEnum.CubicEasingIn for instance (or pick another one if you wish to)
  3. Set you gallery's Width property to: cmpGalleryAnimation.Value
  4. In your screen's OnVisible event, reset your cmpGalleryAnimation component so that its Value output property initializes with the StartValue of 50, thus giving an initial width to your gallery when the screen shows up
  5. Run your app and then, inside your cmpGalleryAnimation component, activate the Animate toggle
  6. Tadaaaaaaaa!
  7. Activating the Reset toggle will just restore the current value to the StartValue and reactivating the Animate toggle will animate your gallery again.

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:

  • ControlAnimator.msapp: it's the component (import it in your app while you're in the Power Apps Studio, through the Import component option of the Custom menu located in the Insert tab)
  • ControlAnimatorApp.zip: it's an application that includes the component + a screen where you will be able to test the various animations and play around with the various parameters (import it in your tenant using the Import canvas app from the Apps tab located on the Power Apps home page)
  • AnimatedHamburgerMenu.msapp: a small application to show how to animate a hamburger menu
    ControlAnimator.png

 

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.

Categories:

Comments

  • Control Animator

    I believe i have cracked this actually, just required setting the varAnimateMenu on the on visible of the screen e.g. Set(varAnimateMenu, false);

  • Control Animator

    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 

     

     

  • R3dKap Profile Picture R3dKap 1,594
    Posted at
    Control Animator

    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?

  • Control Animator

    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

  • R3dKap Profile Picture R3dKap 1,594
    Posted at
    Control Animator

    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?

  • Control Animator

    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. 

  • yoye Profile Picture yoye
    Posted at
    Control Animator

    Cool

  • R3dKap Profile Picture R3dKap 1,594
    Posted at
    Control Animator

    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... 😉

  • rebornScholar86 Profile Picture rebornScholar86
    Posted at
    Control Animator

    @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!

  • R3dKap Profile Picture R3dKap 1,594
    Posted at
    Control Animator

    @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...