Directional View Transitions

[jbarrieault]

What if Turbo allowed visits to specify their View Transition direction?

Turbo's view transition support is awesome—with just a little CSS, you can have rich, directional page transitions that slide pages in and out, in a visually directional manner.

However, view transition direction is currently coupled directly to a visit's action. Iinitial visits have a view transition direction of "forward". The view transition of restoration visits are "forward" when going up the history stack, and "back" when going down.

Allowing Turbo visits to specify their view transition direction independently of their action would allow multi-page applications to create a links to pages that—while advancing history—performs a visual backwards view transition. And, that transition direction is reversed when traveling back to that page.

[oscarmrom]

My coworker helped me reach what could be a workaround or how it may be intended to be used,

data: {turbo_action: "restore"}

on a button or link_to will allow for this to "control" the direction being "back".

Per the docs: https://turbo.hotwired.dev/handbook/drive#restoration-visits

[4lllex]

There is a way to do it with turbo events:

// app/javascript/application.js

document.addEventListener("turbo:click", (event) => {
  if (event.target.dataset.turboVisitDirection === "back") {
    window.visitDirection = "back"
  }
});
document.addEventListener("turbo:visit", (event) => {
  // this way you don't override browser back button navigation
  if (window.visitDirection) {
    document.documentElement.dataset.turboVisitDirection = window.visitDirection
  }
  window.visitDirection = undefined;
});

<%= link_to "Cancel", post, data: {turbo_visit_direction: "back"} %>

https://stackoverflow.com/a/78786565/207090