DEV Community

Cover image for Let's serve a table!
Yuriy K.
Yuriy K.

Posted on

Let's serve a table!

My first CodePen challenge started!

So the task is:

CodePen challenge description

CodePen challenge description

So I've start from switcher it self! Idea came from challenge "example".
example code from CodePen

Time! Most important choices is always about our time. Nice idea, lets spread it. So what would it be clock/hourglass/pendulum... , and first thing which is poped out of my quite tiered mind was a train station round minimalistic clock... So be it. Clock it is.

desktop view clock-like switcher

For those who serf from mobile its even more IKEA...ish 😆 Like it this way even more!
mobile view ckock-like switcher

For time change we used to use day/night background or sun/moon icon switchers. I wasn't really creative here, I did add barely noticeable background switching animation.

And for the main part I start thinking about nice morning routine, what is the part of each single morning that you cant skip? That everyday step you should make first... From pack opening to last gulp, that impossible to forget aroma. Coffee...
What about evening? Evening is gentle, its lazy, party/love time... So evenings for her, especially in February!

So morning coffee for Him and nice afternoon glass of wine for Her.
First idea was to create fast-swap animation, with a bit of distortion and simple animations like fade-in/fade-out. I did animation sketches for it.

sketch on paper

And animation examples.

Hell yeah! I take this challenge seriously 😤

Idea was nice but not good enough, I was eager to make something 3d like, not 3d tho! So I decide to slicing elements into layers, to make 3d in 2d, and than combine them back. You know, it was unexpectedly pleasant and interesting task! something in between playing lego, drawing a picture and slicing cucumbers 😌

Next steps was to wrap it up... Split screen to create surface like filing, add kind of sun as indicator, and sticker, coz its cute 😋
Oh, oh, almost forgot, important step: adding "no-one will notice" shadow 😅
In about 4hrs of moving slices 1px left and 2px right we have something... Something... Idk. Rate it yourself!

14feb is close already, nice occasion to say it! Even if you did it already. Wish you 💘 !!!

Top comments (0)