Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Pages
    • Take a guided tour
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • GCC, GCCH, DoD - Federal App Makers (FAM)
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Emergency Response Gallery
    • Events
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Community Engagement
    • Community Calls Conversations
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Canvas Apps Components Samples
    • Control Animator

    Control Animator

    06-09-2020 13:49 PM - last edited 05-13-2022 10:25 AM

    R3dKap
    Community Champion
    7888 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    R3dKap
    R3dKap Community Champion
    Community Champion
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    Control Animator

    ‎06-09-2020 01:49 PM

    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 

    http://www.gizma.com/easing/.
     
    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-in: starts 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.

    ControlAnimatorApp.zip
    ControlAnimator.msapp
    AnimatedHamburgerMenu.msapp
    Labels:
    • Labels:
    • Components
    Message 1 of 21
    7,888 Views
    16 Kudos
    Reply
    • All forum topics
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
      • 3
    • Next »
    MichelleWongNL1
    MichelleWongNL1
    MVP
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎06-09-2020 10:58 PM

    Wow, super Cool!👍🏻 
    thx for sharing

    Message 2 of 21
    6,670 Views
    1 Kudo
    Reply
    ZePowerDiver
    ZePowerDiver
    MVP
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎06-10-2020 03:37 AM

    That Red Cap is definitely magical!

     

    Nice work @R3dKap 

    Message 3 of 21
    6,617 Views
    1 Kudo
    Reply
    rubin_boer
    Super User rubin_boer
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎02-09-2021 02:12 AM

    Pretty Cool @R3dKap , i wish i knew of this sooner :).

     
    hey there if you liked the post give it a thumbs up, and if it solved your question please accept it as a solution.
    Message 4 of 21
    4,968 Views
    0 Kudos
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎02-09-2021 02:33 AM

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

    Message 5 of 21
    4,967 Views
    0 Kudos
    Reply
    alexane_13
    alexane_13
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎03-19-2021 02:59 AM

    Hi !

    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 ! 

    Message 6 of 21
    4,719 Views
    0 Kudos
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎03-19-2021 09:34 AM

    Hi @alexane_13,

    In the OnVisible property of your screen put this code:

    UpdateContext({locResetAnimator: false});
    UpdateContext({locResetAnimator: true});

    And set your ControlAnimator component's Reset property to this:

    locResetAnimator

    That should do the trick...

    Don't hesitate if you have more questions... 😉

    Message 7 of 21
    4,711 Views
    0 Kudos
    Reply
    arlgroup
    arlgroup Helper I
    Helper I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎06-09-2021 11:06 AM

    where is that cool fly out menu on the left?

    Message 8 of 21
    4,353 Views
    0 Kudos
    Reply
    R3dKap
    R3dKap Community Champion
    Community Champion
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎06-10-2021 06:06 AM

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

    Message 9 of 21
    4,321 Views
    0 Kudos
    Reply
    arlgroup
    arlgroup Helper I
    Helper I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎06-10-2021 06:17 AM

    I am newbie for power apps. Can you please provide sample? Thanks 

    Message 10 of 21
    4,315 Views
    0 Kudos
    Reply
    • « Previous
      • 1
      • 2
      • 3
    • Next »

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Pages
    • Power Automate
    • Power Virtual Agents

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2023 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks
    Consumer Privacy Act (CCPA) Opt-Out Icon Your Privacy Choices