ViewTransition based on navigation direction

[burakcan]

Hi, I'm working on a project in which I need to implement view transitions.
But I couldn't find a good way to implement different animations based on the navigation direction (history.back() should run a different animation).

I implemented something like the example code but it works based on hoping that the router makes the changes during the async transition callback. It kinda works but not reliably. Sometimes the router swaps the dom outside the transition window. Any ideas?

This exact code probably doesn't work, haven't tried. Added it just to give an idea conceptually.

import { useEffect, useRef } from 'react';
import { useRouter } from '@tanstack/react-router';
import type { ParsedLocation } from '@tanstack/react-router';

type NavigationDirection = 'forward' | 'backward';

function someLogicToDetermineDirection(): NavigationDirection {}

export function useViewTransitions() {
  const router = useRouter();

  useEffect(() => {
    const unsubscribe = router.subscribe('onBeforeLoad', async (event) => {

      let direction = someLogicToDetermineDirection(event);

      const htmlClasses = document.documentElement.classList;
      htmlClasses.add('is-navigating');

      if (direction === 'forward') htmlClasses.add('is-navigating-forward');
      else if (direction === 'backward') htmlClasses.add('is-navigating-backward');

      const transition = document.startViewTransition(async () => {
        await new Promise(resolve => setTimeout(resolve, 300)); // transition time
      });

      const cleanup = () => {
        htmlClasses.remove('is-navigating', 'is-navigating-forward', 'is-navigating-backward');
      };

      await transition.finished.finally(cleanup);
    });

    return () => {
      unsubscribe();
      cleanup();
    };
  }, [router]);
}

[burakcan]

Opened a pr for this: #4031