Hello, thanks for making this library, it's a blast 🔥

One thing I am wondering is, would it be possible to only animate the elements inside a Turbo frame (when navigation or form submit happens and targets a frame)?

From what I understand, it doesn't look like it's possible at the moment looking at the disabling animations section. But would it be possible once that is fixed? It would help a lot as right now, the only solution I found is to disable Turn when the navigation starts, show some skeleton and then re-enable Turn when the frame is rendered.

By the way, I think there's a typo in the Tailwind usage :

<main data-turn-exit="turn-exit:animate-exit" data-turn-enter="turn-exit:animate-enter">

should be

<main data-turn-exit="turn-exit:animate-exit" data-turn-enter="turn-enter:animate-enter">

When using non-view-transition animations alone, there's a temporary flash of the new content before enter. Current solution is to use v2.1.0 (where view transitions are disabled by default)

Hello! It's me again.

I updated to the latest version and really decided to try out the view transition API. It works very well and looks very smooth.

However, I encountered a weird behaviour. After visiting a 400~500 status code page (like a 404 page), future navigation will hang for a long time (a few seconds) during which I cannot do anything on the page. It's definitely not a speed problem, as the networks tab completes instantly. Removing Turn also gets rid of the problem. I created a new quick Symfony app and tried it without any other package and with default transitions, and the problem persists. I also tried to set Turn.config.experimental.viewTransitions = false; but it doesn't seem to do anything? It's still using the view transition API, I believe (dunno if this is intended).

Looking in the DevTools, it seems that the transition API tries to animate something? Because I can see the ::view-transition appear while it hangs. It's also worth noting that it does not happen when I visit the 404 page directly from my browser and then click on the homepage. It only happens when Turbo visits the 404 link.

If needed, I can create a quick repository to highlight what I did exactly and what the problem is (I only tested it in Symfony apps, but I doubt it's a problem with it, I just built the assets normally using Webpack).

Hello 🙂

I started using Turn with the view transition API and I noticed a few things that could maybe be integrated into the library, let me know what you think (I am still learning how the API works and its best practices, but I think I have a pretty good understanding of it already).

1. Add an attribute helper to add view-transition-name on elements during transitions

I think one of the best features of the view transition API is the ability to let the browser automatically translate elements from one place to another using view-transition-name. From what I understand (and what I've tested so far), it's important to have this attribute added only during the transition and then removed if the DOM elements are not the same (which will be the case 99% of the time during visits). This is explained here.

With that, I think it's in the scope of this library to add an attribute like data-turn-transition-name that would only get added to its respective element during a view transition, and then automatically removed (by setting the view-transition-name property to an empty string or none).

It would also maybe be interesting to have it "scoped" to its current element, so it does not add the view-transition-name property on every element on the page? I don't know what the best practises for names are. e.g. I have a list of products, do I just add view-transition-name: product-title; to the product I clicked on during the transition, or add view-transition-name: product-title-1;, etc... On each product currently visible on my page?

I did a quick implementation with the current events dispatched by Turn, I have no idea if this is the best way to do it and it could probably get some improvement, but it worked pretty well during my testing.

let pendingTransitions: HTMLElement[] = [];

// Add transition name to elements with data-turn-transition-name attribute (only those inside the initiator)
window.addEventListener('turn:before-transition', (({ detail }: CustomEvent<{ initiator: HTMLElement }>) => {
  if (getPrefersReducedMotion()) {
    return;
  }

  const { initiator } = detail;
  const transitions = initiator.querySelectorAll('[data-turn-transition-name]');

  transitions.forEach((transition) => {
    if (!(transition instanceof HTMLElement)) {
      return;
    }

    // @ts-expect-error Experimental API
    transition.style.viewTransitionName = transition.dataset.turnTransitionName;

    pendingTransitions.push(transition);
  });
}) as EventListener);

// Remove the transition names we added before
window.addEventListener('turn:before-enter', (() => {
  pendingTransitions.forEach((transition) => {
    // @ts-expect-error Experimental API
    transition.style.viewTransitionName = 'none';
  });

  pendingTransitions = [];
}) as EventListener);

With that, my details page would have the transition names set

<h1 style="view-transition-name: news-title;">Some news</h1>

<p style="view-transition-name: news-desc;">News description<p>

And my results on my search page would have the data- attribute with the same name

<a href="news/some-news" class="news__result">
  <p data-turn-transition-name="news-title">Some news</p>
  <p data-turn-transition-name="news-desc">News desc...</p>
</a>

The title and description now nicely translate when clicking on the link or going back to the search page.

2. Allow hybrid configuration for Firefox/Safari

I found myself in a situation where I had to make a choice : either support only view transition browsers and hope Firefox/Safari implement it soon enough, or give up on it and use data-turn-enter & data-turn-exit only.

This happened because on a page with a navbar header, a footer and a sidebar (lots of navigation), I wanted these elements to not animate during a visit, so I would add data-turn-enter & data-turn-exit to the container with the current view. It works well but breaks the view transition API completely. It seems that as soon as I add these attributes, the view transitions are not taken into account at all (most likely because they conflict with each other as Turn is animating the whole view with a fade). It would be interesting to be able to add these attributes, but only use them if the view transition API is not available.

I know what I want to achieve would most likely be achievable by using CSS only rather than the data- attributes, but it would require more work than simply adding my Tailwind animation to the attribute.

Follows a nice and similar pattern to React ARIA components, and improve integration with Tailwind via their data attribute API

Deprecate in v2; remove in v3?

Questionably a bug with Turbo

I found that when I added turn to my rails 7 project, it worked until page transitions were too quick. So I removed some classes on html element when initialising the Turn class instance.

And also added export default on the class in order to import it in my application.js

There may be a better solution to this, I'm just adding my contribution :)

export default class Turn { constructor (action) { // ... this.removeClasses('enter'); this.removeClasses('exit'); }

@domchristie/turn doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.