Nineteen page transitions, one argument

Page transitions are resources too. Load one, pass trans: on a view, and the SPA swap animates instead of jumping.

return view($this->page, trans: 'flip')

Nineteen of them ship: slide, zoom, flip, glide, ripple, wipe, cards, cube, curtain, diagonal, diamond, diaphragm, drop, glitch, skew, spiral, spotlight, tilt, tv. They are CSS, driven by the browser's own view transition machinery where it is available, so the animation runs on the compositor rather than in a render loop of yours.

The part that makes it usable rather than decorative is direction. A transition that plays the same way going back as going forward feels wrong in a way people notice before they can name. So the value carries it: trans: 'slide back' reverses, and the engine flips a stored transition to its back form by itself when the browser goes back through history. Moving backwards for any other reason is the app's call, which is what the tour on this site does from its chapter index.

This is also the piece of Phlo most easily overdone, and the tour is deliberately the place it is shown off rather than the documentation. On a real application the answer is usually one transition, used consistently, or none. A page that performs on every navigation stops being fast and starts being slow with extra steps.

Engine 1.0. See transitions in the Views chapter.