/* View Transitions — iOS-like slide animations for page navigation. Turbo sets data-turbo-visit-direction on : "forward" for advance, "back" for restoration, "none" for replace. */ .mobile-main { view-transition-name: main-content; } .mobile-tab-bar { view-transition-name: tab-bar; } /* Instant crossfade keeps the tab bar as its own layer (on top of main-content) while swapping visible/hidden snapshots in 0s. */ ::view-transition-group(tab-bar), ::view-transition-old(tab-bar), ::view-transition-new(tab-bar) { animation-duration: 0s; } /* Disable the default root crossfade */ ::view-transition-group(root) { animation-duration: 0ms; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } /* The group is never styled below, so it keeps the UA's 250ms default — and the transition only ends when its longest animation does. Left alone it holds the page frozen for 250ms no matter how short the slides are, so it has to match them. */ ::view-transition-group(main-content) { animation-duration: 100ms; } /* Forward: new page slides in from right, old slides left with parallax */ html[data-turbo-visit-direction="forward"]::view-transition-old(main-content) { animation: slide-out-left 100ms cubic-bezier(0.32, 0.72, 0, 1) both; } html[data-turbo-visit-direction="forward"]::view-transition-new(main-content) { animation: slide-in-from-right 100ms cubic-bezier(0.32, 0.72, 0, 1) both; } /* Back: reverse of forward */ html[data-turbo-visit-direction="back"]::view-transition-old(main-content) { animation: slide-out-right 100ms cubic-bezier(0.32, 0.72, 0, 1) both; } html[data-turbo-visit-direction="back"]::view-transition-new(main-content) { animation: slide-in-from-left 100ms cubic-bezier(0.32, 0.72, 0, 1) both; } /* Morph refreshes — no animation */ html[data-turbo-visit-direction="none"]::view-transition-old(main-content), html[data-turbo-visit-direction="none"]::view-transition-new(main-content) { animation: none; } @keyframes slide-in-from-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slide-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-30%); opacity: 0.8; } } @keyframes slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes slide-in-from-left { from { transform: translateX(-30%); opacity: 0.8; } to { transform: translateX(0); opacity: 1; } } /* Desktop keeps no slide: the chrome around the content is static, and sliding a pane beneath it reads as the page tearing away. Same for reduced motion. */ @media (min-width: 1024px), (prefers-reduced-motion: reduce) { .mobile-main { view-transition-name: none; } .mobile-tab-bar { view-transition-name: none; } }