Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sceik

Analog clock using GSAP

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

×