Jump to content


Analog clock using GSAP

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello folks,


For a school project I am creating an analog clock and animating it using GSAP. For now, I've got it moving in the way I want, but part of the functionality of a clock is that it actually shows the current time. So my hence my question, how do I get the arms to show the current hours, minutes and seconds?



See the Pen VRbZbX by sceik96 (@sceik96) on CodePen

Link to comment
Share on other sites

You can figure out where each hand should be by getting the local time components and translating those to degrees. For the hour ... get the hour (in 12 hour format) + subhour (current-min/60) ... so, 17:30 would translate to 5:30 ... which translates to 5.5. Take that number and multiple it by 30 (30° per hour) ... which would move the hour hand to starting point of 165°. Similar logic for minute and second. You could use a TweenMax.set() to move these each to their initial position before your full rotation tweens.


Good luck with the project!

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.