Calendar Component Animation
Limited space require decisive component layout. To explain this concept I am demonstrating the various layout of calendar component.
How to decide each layout?
I start with signifier to most spacious layout, higher chances of accommodate all necessary component. Intermediate states are mostly dependant on one another. I think three types of component breakdown is enough to utilise it for mobile and web.
Use physics and natural motions
What if I squash and squeeze the component?
That's exactly what I do with my animation. It is step by step process. I really don't have exact plan of exciting such animation however process itself drawing that line, just keep working on it until I find it perfect.
Actual implementation is possible through React.js. Trigger points are Height and Width of entire component. Developer render the new layout and also add effect like Opacity, Position and Scale to give natural feel.
What is your take on this?
P.S. Alignment. :(
UI/UX Interaction Collections
Vol 1.0
Micro-interaction Collections
Vol 1.0