This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Josh Ackerman
Posted Jul 21 - Read on Facebook

Hello, I recently set out to improve the clock prototype I uploaded to Dribbble a while ago by making the second hand rotate smoothly. My solution to smoothly rotating the second hand is to use milliseconds and essentially rotate the hand by a very small degree, each millisecond. Obviously the issue is that time.milliseconds() counts from 1 to 1000, which means that every second, I need to add 1 to the number of milliseconds for an accurate count of how many have passed. I need to count how many seconds have passed because they influence the rotation directly. Is there a better solution? If not why is the function "r" not working correctly (in the attached file)? http://share.framerjs.com/dnahgy1h0iai/

Any help would be greatly appreciated!

5 Comments

Balraj Chana

Hey Josh, it's not clear what you are trying to achieve. I assume that you just want to rotate the second hand 360 degrees smoothly. You can use a linear curve and rotateZ by 6 degrees every second (360 degress / 60 seconds)

Here's one way of doing it: http://share.framerjs.com/oydqzmj03v6g/

Josh Ackerman

Thanks, although that solution exactly does not consider the actual time. I used a slightly modified version of your method, which does factor in the actual time. The only issue now is that the hand spins around counter-clockwise when it completes a rotation. Here is a more polished demo http://share.framerjs.com/7lwmiqu44li0/
The problem is when seconds become 0, the hand travels an entire 360 degrees back to 0. Thanks for any help.

Koen Bok

I'd just continue counting eg 361

Josh Ackerman

Yes, the issue that I have not found a work around for is that date.getSeconds() seems to return a number between 1 and 60 - it does not keep counting. With my previously more complicated project, I wanted to increment a variable, say x, each time, to track how many seconds have passed. Then use current seconds + x. Although that did not seem to work either. Here is a picture of the code, can you recommend an easier way to continue counting?

Josh Ackerman

I figured out a solution. I will post the completed clock soon.

Read the entire post on Facebook