Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find consulting services
    • Blog
    • Customer stories
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • 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
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Power Apps Community Demo Extravaganza 2020
    • Galleries
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • 2019 Microsoft Business Applications Summit Recordings (Archived)
    • Microsoft Business Applications Summit 2020 Session Recordings
    • Ideas
    • Power Apps Ideas
    • 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
    • Counter Animation

    Counter Animation

    11-14-2020 13:44 PM - last edited 03-22-2021 15:12 PM

    Super User FabianAckeret
    Super User
    1267 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    FabianAckeret
    Super User FabianAckeret
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    Counter Animation

    ‎11-14-2020 01:44 PM

    This component brings a little joy and visual improvements to your apps. It automatically animates the desired number:

    counterAnimation.gif

     

    When adding the component, you can set the desired number to count up to, the speed until that number is reached, a trigger (when should it start counting), and some formatting. If you need to troubleshoot, there is also a button for that.

    Important: Since this component is using timers, the counter only works in preview, not in the editor!

     

    How to configure

    1. The speed in milliseconds until the desired number is counted up to. 1500 = 1.5seconds
    2. The desired number to show. You can use values like CountRows(<data source>)
    3. A variable when the animation should start to count. E.g. gblStartAnimation (you could set Set(gblStartAnimation,true) on the Screen.OnVisible). Before setting the variable, it's a good practice to Reset the component. E.g. 
      Reset(<component name>);
      Set(gblStartAnimation,true)
    4. If you ever need to troubleshoot or would just like to see the animation again, simply set this to true and click the button (not in preview). Then, trigger the start variable again
    5. Some basic formatting options

     

    properties-explained.png

     

    I kept the component very simple so you can adjust & customize the result however you like. The icons and labels below are not part of it. 

     

     

    Where to use it

    Basically everywhere you need to display numbers, such as

    • Reports 
    • simple informational content
    • CountRows
    • ...you get the idea...

    Here is another example of a design:

    counterAnimation2.gif

     

    I hope you'll enjoy this little component and if you do, please consider giving it a thumbs up so others can benefit from it as well.

    If you have any questions or would just like to get in touch, just send me a dm or connect with me on social media:

    @FabianAckeret Twitter
    /in/fabianackeret/ LinkedIn

    Please click Accept as Solution if my post answered your question. Like my answer? Consider giving it a Thumbs Up. Others seeking the same answers will be happy you did.
    CounterAnimation.msapp
    Labels:
    • Labels:
    • Components
    Message 1 of 3
    1,267 Views
    8 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic
    rajeshcs
    rajeshcs
    New Member
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎03-18-2021 06:36 AM

    This is great! I tried adding the counter animation but hit with an issue. Any help on this would be greatly appreciated. 
    I have created a variable (varstartAnimation) and added against the varresetCounter. Added a button and onclick property is set the variable varstartAnimation to true or false. I was expecting when the variable is set to true the counter will reset. Unfortunately it is not happening. If i click on the counter then it is getting resetting and the animation works fine. I am not sure what I am doing wrong here.

    Thanks

    Rajesh

    Message 2 of 3
    248 Views
    2 Kudos
    Reply
    FabianAckeret
    Super User FabianAckeret
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    a month ago

    Hi @rajeshcs 

     

    Thanks  🙂

    For debugging purposes, could you enable "Show Reset Button" on the component? This will display a timer.

     

    Then, for your button that you're setting the Start-variable with, add something like Reset(<the name of the component>) before setting the actual variable.

    So your button might look like:

    Reset(cmpCountAnimation);
    Set(varstartAnimation, !varstartAnimation);
    // alternatively also:
    // Set(varstartAnimation, true);

    After that, make sure that you are in preview mode (or play the app) as timers don't work in the editor itself. 

     

    Once in preview, try to click on the button that sets the start variable. If it's still not working, click on the timer button in the component itself and see if that works.

     

    I hope it works, let me know if you struggle.

     

    Kind regards,

    Fabian

    Please click Accept as Solution if my post answered your question. Like my answer? Consider giving it a Thumbs Up. Others seeking the same answers will be happy you did.
    Message 3 of 3
    220 Views
    0 Kudos
    Reply
    Preview Exit Preview

    never-displayed

    You must be signed in to add attachments

    never-displayed

    Additional options
    You do not have permission to remove this product association.
     

    Power Platform

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

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Studio
    • iOS
    • Android

    Learn

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

    • © 2021 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks