How I made Winter solstice animation

Dark blue sky, moon in the top right corner

With redesign I chose to make a space for an animation between the menu and the actual content. It’s always an SVG animation, so nothing which would cause huge data transfers, current one is 4KB big. I am close to paganism so Winter solstice is more important event to me than Christmas, so I made animation which represents it.

Ideation

There is very little sun light, ~8 hours, on the day of Winter solstice and the sun is at its lowest point of the year. I made a sketch in my sketchbook and went to Affinity Designer. The Moon which is at the top was added at the end because the top felt quite empty.

 

rough sketch of sun's movements

I admit that this isn’t the best approach, ideally I’d make more than one sketch but with dysgraphia and dyspraxia I struggle a lot. Hopefully this will be easier in time with more practice under my belt.

Creating the vectors

My choice of dark blue for the night sky is a personal one. The night sky is usually represented as black but I prefer the early night sky when it’s blue-ish and sometimes it plays with more colors. Day light sky is typically blue but isn’t visible at this stage.

Snow is usually depicted as white but in reality snow can be gray, especially during the night time. At the moment I chose not to animate color of the snow because I am not sure about performance. May be next year I’ll do it.

From the beginning the day sky and the sun are hidden. Sky is made of three elements with the exact shape as the ground. The sun is positioned between sky and ground layers, so when the sun starts moving up and left it’s not hiding behind one of sky elements.

The animation

When I was creating the animations I didn’t search for methods how to animate on a curve in CSS. May be I should’ve because there’s a post from Tobias Ahlin about it. But that doesn’t mean that experimental and approximation approach is inherently wrong. Au contraire, it’s fun and that matters in personal projects.

half curve with seven points

When you are taking the approximation path you need to pick several points where you will change the sun’s path. I chose 0%, 32%, 48%, 50%, 52%, 68% and 100%. There’s no hard math behind it, frankly, I chose them because they felt right. I could have chosen more or less.

The sky is made up from three elements because initially I wanted to make them partially opaque, so the lowest layer would always be almost solid color and the top most layer would always be somewhat transparent. But that didn’t look so good when I executed it, so I change the opacity to 100% on all of them.

They rise up in cascade and have the same duration as the sun. The reason why I chose three elements and translateY transform and not scale transform is because it felt more natural and easier to do. If I used scale function I would have to translate also transform origin which I am not sure is a good idea with animations. Starting with top most position for each element looked more doable.

When the sun reaches the top most position a bubble with three dots appears above it and then sun goes down. I used to do comics, so that’s a personal touch.

Complications

Current animation is a second version because with previous one there was a problem with export and size. Affinity designer exports, at least in my case, SVGs for web with 72 dpi which means that 1000px will be 750px in viewbox but the image is still 1000px big and that created an awkward space.

Conclusion

Although it was fun creating this project next time I’ll be exploring other options because timing all elements manually is really hard.

Winter solstice animation, sun goes up but not too up, so moon is visible and sky is partially dark, in the middle three dots appear and then sun goes down again