Rotate an object 360º over one year

Design help Animations & Interactions
1

Hey all,

I have an idea – the Anglican liturgical year is shown with a cyclical calendar. I’d like to display it on my website (maybe on this page), and have it rotate 360º over the course of the year, with a static arrow at the top to indicate the current time.

Any ideas on how I could pull this off?

Calendar looks like this:

colours-liturgy-44
colours-liturgy-441920×1920 205 KB

Thanks in advance! (Also, still looking for advice on this topic :grimacing:)

2

Yes you could do that with custom code.
I’d do it in two parts-

Create a custom CSS style chunk in the designer which handles the rotation transform. sort that out first, e.g. make sure it works to rotate between 0 and 360.

Once you have that, assign a CSS var as the degrees of rotation.

Then use custom JS to calculate the day of the year as a 0 to 359 value, and set that var accordingly.

3

hi @Petra The simplest way is to design your calendar as SVG and use simple JS to rotate it. A several years ago I have made something similar I called “most depressing clock” feel free to check it out as an idea how things can be done.

if you prefer to build it with css here is another example but it will need inner and outer mask to make a circle.

EDIT: also you have to have two graphics because of leap year you will need eg. code like this to swap calendars if leap year and back if standard year

CleanShot 2024-03-18 at 06.26.19
CleanShot 2024-03-18 at 06.26.191198×1248 170 KB

NOTE:
Checking firstdayInTheYear will be triggered only when page is will be visited!!!

This mean if no one will visit website on January 1 calendar will not be swapped. in this case you can use eg. npm package node-cron to run this function automatically on January 1, but WF doesn’t allow install any npm’s so you can try to use jsDelivr to run this package.

than additional code will be something like

cron.schedule('0 0 * * *', () => {
  const currentYear = new Date().getFullYear();
  checkLeapYear(currentYear);
});

EDIT-2: I am sill thinking about how to cheat on WF to run firstdayInTheYear automatically and there is possibility to run this function every 24 hours automatically using setInterval.

const oneDayInMilliseconds = 24 * 60 * 60 * 1000;

// Set an interval to run the checkLeapYear function every day
setInterval(() => {
  const currentYear = new Date().getFullYear();
  checkLeapYear(currentYear);
}, oneDayInMilliseconds);

rest is on you :wink: I’m finally done :laughing:

Best of luck

4

@memetican and @Stan thank you so much – turns out my notifications were off so didn’t realise anyone had replied.

Really appreciate your responses. @Stan those instructions are super helpful and the inclusion of a leap year workaround was considerate. I’m looking forward to giving this a go!

1 Like