Motion
Transitions
When the screen changes, things move to where they now belong instead of jumping. Pages rise in; rearranged items glide; new ones fade up and old ones fade down.
Page change
Every page enters this way: up 18px and in, 0.55s power3.out, after the scroll is back at the top.
Overview
Layout change
Sort, filter or switch the view: every card glides to its new place (Flip), new ones fade up, removed ones fade down.
Atlântico loftLagos · Active
€52,000 Casa do MonteLoulé · Active
€98,000 Clinic fit-outVilamoura · Active
€61,000 Clinic roof terraceVilamoura · Planning
€38,000 Old barn studioBoliqueime · Done
€26,500 Quinta restorationBoliqueime · Active
€84,000 Transition rules
- Same thing, new place → glide. Use Flip; never fade out and back in something that only moved.
- New things → fade up (scale .94 → 1, 0.45s). Removed things → fade down (0.3s).
- Hold the container. While children glide, the box keeps its height and eases to the new one, so the page below never jumps.
- The latest click wins. Switching again mid-move starts from where things are now.
- Switchers slide their thumb (0.5s power3.out) and charts redraw from where they are.