GSAP · Calendar · Motion · iPad
A day-view planner shown inside an iPad Pro frame. Colored event blocks sit on a beige half-hour grid, and a red line with an 11.31 badge marks the current time. Below the grid are a week scrubber and a bottom bar with yesterday's and tomorrow's dates, skip arrows, a plus and a round search button. You can switch between two dummy days, Monday and Tuesday.
The details
- Overlaps are worked out in code. A block on a higher layer keeps its shape, and the block beneath gives up that space plus a gap on every side. The gap is a single
cqwlength, so it's the same horizontally and vertically. - Inner corners curve inward. Each one uses the upper block's corner radius plus the gap, so the spacing stays even around the bend.
- Changing days leaves the grid, the time line and the scrubber in place. Only the events move: the old day sweeps out and the new one follows close behind. A scheduler checks each block's spacing when it sets off and when it stops, so no two blocks ever touch. If you press the other arrow partway through, the change runs backwards.
- Dates and weekdays roll like a gauge in fixed-width cells, and the scrubber's grey week band grows or shrinks to match the day.
How it evolved
The session began as a static layout, with several rounds on icon sizes and grouping. The day arrows first linked to separate pages, then became an in-place transition. Most of the later work was motion tuning. Rigid groups of overlapping blocks were tried, then replaced with per-event timing based on overlap, size and position. The speed changed several times. A spring ending and a sway of the timeline were both tried and removed. The final fixes matched the corner radius to the mockup and removed a stray digit that flashed during the date roll.
