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

# Interactive clock - stop at specific time

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!

##### Share on other sites

This was a pretty interesting experiment. Maybe it's not perfect, but here you go: GSAP clock

• 5
##### 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 ```

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)

• 3
##### Share on other sites

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