Jump to content


Interactive clock - stop at specific time

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

Firstly I would like to say thanks to you Greensock guys for making such a great animation platform. I have struggled with animation over the years using JS and GS is simply the best out there.


My question is this:


I am currently trying to create a clock with an hour and minute hand (also an AM to PM dial but that can come later after I get over this hurdle). I have got the hands to tween infinitely around and this works great if it were static and you just want a clock to keep spinning and spinning around. What I ultimately want to acheive is to be able to set the time and the clock would spin around till it reached that time.


I have created a codepen link to show what I have done so far


See the Pen Iakzg by anon (@anon) on CodePen


I am very new to the platform, I hope I can get some advice about what I need to do. Any help is greatly appreciated and I would love to hear from some of you greensock gurus! :)



Link to comment
Share on other sites

Hi and welcome to the forums.


Seems Jamie just beat me with his full-working version ;)


Here is just one simplistic way to position the hands based on current time (hour / minutes)


  var hourTween = TweenMax.to(myPointerH, twelveHours, {rotation:"360_cw", ease:Linear.easeNone,repeat:-1, paused:true});

  var minuteTween = TweenMax.to(myPointerM, oneHour, {rotation: "360", ease:Linear.easeNone, repeat:-1, paused:true});
  function showTime(hours, minutes){
    minutesAsSeconds =   minutes * 60;
    hoursAsSeconds = hours * 60 * 60;
    hourTween.progress(hoursAsSeconds / twelveHours) 
    minuteTween.progress(minutesAsSeconds / oneHour) 
    document.getElementById("time").innerHTML = hours + ":" + minutes;
  showTime(8, 15) //hours, minutes 

Demo: http://codepen.io/GreenSock/pen/pvnAu


The basic approach is create a tween for hours and minutes with duration in seconds.

Based on how many hours in seconds and minutes in seconds you can set the progress() of each tween accordingly.


You could also tween the progress() of each tween to achieve animation (although accounting for am/pm would require some additional logic)

  • Like 3
Link to comment
Share on other sites

Wow guys, this is exactly what i was going for! Thank you so much!

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.