Exit `0 → -12px`, commit the destination, then enter `16px → 0`.
Directional depth transition
Shows forward and backward navigation while the surrounding shell stays still.
Animation preview
Pattern contract
Direction is semantic: product hierarchy chooses forward or backward.
Exit `0 → 12px`, restore the previous view, then enter `-16px → 0`.
Keep the global shell, parent orientation controls and container fixed.
Block repeats, preserve navigation on animation failure, restore scroll and move focus.
Motion values
PhaseTranslationDurationEasing
Forward exit
0 → -12px--sous-motion-state--sous-motion-ease-exitForward enter
16px → 0--sous-motion-state--sous-motion-ease-enterBackward exit
0 → 12px--sous-motion-state--sous-motion-ease-exitBackward enter
-16px → 0--sous-motion-state--sous-motion-ease-enter