How can i tell turbo that a view transition should be "Back"

I have my css set up to target back and forward page transitions, which works great when clicking links on the site (forward transitions) and when clicking the browsers back button (back transitions)

The css uses the data attribute on the html tag to target the styles.

data-turbo-visit-direction="forward"
data-turbo-visit-direction="back"

How can I/is it possible to, specify that a link is a backward visit direction

eg i was hoping to do this:

 <%= link_to "Cancel", post, data: {turbo_visit_direction: 'back'} %> &nbsp; 

but that doesnt do anything to the html data attribute in the html tag.

You can set direction manually in a turbo:visit event:

// 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"} %>

The rest of the set up:

<!-- add to head tag -->
<meta name="view-transition" content="same-origin">

/* transitions */

/* FORWARD */
html[data-turbo-visit-direction='forward'] {
  view-transition-name: swipe-left;
}
::view-transition-old(swipe-left) {
  animation: 0.4s ease-in both move-out-left;
}
::view-transition-new(swipe-left) {
  animation: 0.4s ease-in both move-in-left;
}
@keyframes move-out-left {
  from { transform: translateX(0%); }
  to { transform: translateX(-100%); }
}
@keyframes move-in-left {
  from { transform: translateX(100%); }
  to { transform: translateX(0%); }
}

/* BACK */
html[data-turbo-visit-direction='back'] {
  view-transition-name: swipe-right;
}
::view-transition-old(swipe-right) {
  animation: 0.4s ease-in both move-out-right;
}
::view-transition-new(swipe-right) {
  animation: 0.4s ease-in both move-in-right;
}
@keyframes move-out-right {
  from { transform: translateX(0%); }
  to { transform: translateX(100%); }
}
@keyframes move-in-right {
  from { transform: translateX(-100%); }
  to { transform: translateX(0%); }
}