Jump to content
GreenSock

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

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! :)

 

Thanks!

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)

 

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


// TWEEN THE MINUTE
  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;
  }
  //8:45
  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.
×