hakiko
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by hakiko
-
-
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
Clock animation not playing on setinterval
in GSAP
Posted
Dear Sahil,
Thank you for explaining, you're code was just what i was looking for.
Thank you!
-Hakiko