Showing results for 
Search instead for 
Did you mean: 

Create an Animated "Analog" Clock


I work in TV, so time is kind of a big deal for us.  When I started building apps, one of the first things I started playing with in PowerApps (and Flow) were the Date & Time functions and the Timer control. 


This demo app is not something I use in production, but rather an exercise. 



My objectives for the app were:

  • Create “analog” clock
  • Clock must update in real time, including
    • Hour
    • Minutes
    • Seconds
  • Clock can only use PowerApps
    • No external data sources or connections



While I would have preferred traditional clock hands, this proved impractical due to the Image control's limited rotation to 90 degrees at a time.  


So instead, I opted to animate circles in sync with the Hour, Minutes and Seconds around a clock face image.


Bells & Whistles

I decided to add a few extra features to my including:

  • X & Y Sliders to control the Horizontal and Vertical placement of the clock
  • Hour Offset slider to simulate time zone changes (more on Time Zones in my next app)
  • A toggle that switches the second "hand" animation mode between the traditional "tick-tock" style and a more fluid animation style
  • Lastly, a debug mode toggle that shows and hides controls that can help app admins test and debug the app


Watch Videos & Get the App

I created two videos and posted the app to the Community Forum's App Gallery.  


In Part 1, I demo the app:


In Part 2, I go into some detail about how the app works:


Next Time

I hope you gleamed something interesting from this demo.  If you'd like more detail on any or all of the app, let me know.  I have a few more demo apps in the queue and I hope to record those videos soon. 


Up next is my Convert Time Zone Demo app

PowerApps Video - Convert Time Zone Demo - Screenshot.pngConvert Time Zone Demo app - Coming soon!