Search the Community
Showing results for tags 'clock'.
Found 3 results
-
Hello to the community I'm trying to create a countdown with a special design and to animate like slots numbers do: with mask and rolling from top to bottom. Is there something similar? Any clues? I found this https://codepen.io/creativeocean/pen/pWXgNG but it's not what I need. I need from 300.000 to 0, different speeds, and this kind of animation: Any advices or help on this? The speed and the number to start from and go to, will change every 5 minutes. Thanks!
-
Hi guys, first of all a big thank you. This is my first post, I just signed up and I guess its in order to thank you for creating such a stable library. It is an essential part of a project I have been working on last couple of years....and it is the only lib that hasn't been touched, or i might say "retouched" :-). Just to mention, even jquery 3 got a rework, face lifting... So, my only question, after all this years is : Can internal clock be somehow exposed? Does the clock tick if no animations are going, or only when something is active? If a lot is happening, are all tweens, timelines and everything ticking to same clock? Can onUpdate() for all functions (to, from, stagger....) be accessed or extended somehow? All these questions are for more or less same reason...I need to do something inside my app on every GSAP tick (update transformation data of elements, bounding boxes of selected elements and similar). I guess i dont even need to execute some code...just to know has it ticked... I could go and make a to() function run in loop, indefinitely and update a var, or execute code on every onUpdate(), in background... if there is no other way and all tick to same clock. Thanks in advance
-
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
