Jump to content
GreenSock

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

Clock animation not playing on setinterval

Recommended Posts

Dear Greensock community,

 

i've been trying to make a analog clock, that uses animations from tweenmax. I saw this thread and decided to use parts of that code

The clock works when refreshing the page continuously but the hole point of this clock is to just run by itself instead of having to refresh the page 1000 times. I tried to use a setinterval function but that breakes the animation.

So in short: the clock as of now does not update, it stays static, only refreshing makes the analog pointers move. How do i make them move like a normal clock.

 

Here's the code that i made using the thread/post above.

 

$(document).ready(function() {
    var datetime = new Date(),
        h = datetime.getHours(),
        m = datetime.getMinutes(),
        s = datetime.getSeconds();

    var myPointerH = $('.clockH');
    var myPointerM = $('.clockM');
    var myPointerS = $('.clockS');

    var oneSecond = 60/60; // 1 second
    var oneHour = 60 * 60; //1 hour tween
    var twelveHours = 12 * 60 * 60; //12 hour tween


    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});

    var secondsTween = TweenMax.to(myPointerS, oneSecond, {rotation: "360", ease:Linear.easeNone, repeat:-1, paused:true});


    function showTime(){
        minutesAsSeconds =   m * 60;
        hoursAsSeconds = h * 60 * 60;
        secondsAsSeconds = s / 60;

        hourTween.progress(hoursAsSeconds / twelveHours);
        minuteTween.progress(minutesAsSeconds / oneHour);
        secondsTween.progress(secondsAsSeconds / oneSecond);
        console.log(hourTween, minuteTween, secondsTween);
    }
        showTime();

        setInterval(function() {
            showTime();
        }, 1000);
});

 

Kind Regards, Hakiko


 

Link to comment
Share on other sites

The thread you linked has all demos that only run on page load, most probably OP wanted it that way.

 

If you want your clock to run like normal clock then it should track time every few milliseconds. So in your code you just need to update time inside your showTime function, all four variables datetime, h, m, s need to be updated so they will have new time.

 

The clock hands are being positioned by using flexbox and yPercent as -50, that will center them at bottom end. Transform origin is set to '50% 100%' which is at the bottom of the div so it will rotate clockwise from bottom. The rotation value is post-fixed by '_cw' which makes sure that clock will only run clockwise.

 

See the Pen LdEMdo?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

19 hours ago, Sahil said:

The thread you linked has all demos that only run on page load, most probably OP wanted it that way.

 

If you want your clock to run like normal clock then it should track time every few milliseconds. So in your code you just need to update time inside your showTime function, all four variables datetime, h, m, s need to be updated so they will have new time.

 

The clock hands are being positioned by using flexbox and yPercent as -50, that will center them at bottom end. Transform origin is set to '50% 100%' which is at the bottom of the div so it will rotate clockwise from bottom. The rotation value is post-fixed by '_cw' which makes sure that clock will only run clockwise.

 

Dear Sahil,

 

Thank you for explaining, you're code was just what i was looking for.

Thank you!

 

-Hakiko

  • Like 2
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.
×