Analog clock using GSAP

[Sceik 0 Likes (Newbie)]

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

[Shaun Gorneau 1,503 Likes (Superhero)]

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!