View Transitions

TL;DR

Manic supports the View Transitions API for smooth, animated client navigations. Use setViewTransitions or config router.viewTransitions, and ViewTransitions / viewTransitionName on Link for shared-element-style CSS.

Cross-document transitions are a browser feature between full page loads; Manic focuses on SPA navigations (history + React render).

See the API reference for ViewTransitions helpers.

What It Is

View Transitions provide native browser animations when navigating between pages:

Feature	Description
Cross-document	Animate entire page changes
Container-scoped	Animate specific components
Shared elements	Morph elements between pages
Custom animations	CSS-based keyframe animations

Browser Support: Chrome 111+, Safari 17.4+, Edge 111+

Prerequisites

Routing Guide - Navigation basics
Theme — CSS variables and dark mode

Quick Start

Enable View Transitions

// app/routes/index.tsx
import React, {  } from 'react';
import { ,  } from 'manicjs';

export default function () {
  (() => {
    (true);
  }, []);

  return (
    <>
      <>View Transitions Enabled</>
    </>
  );
}

Global View Transitions

Enable View Transitions globally in your app:

// app/main.tsx
import React from 'react';
import {  } from 'react-dom/client';
import { ,  } from 'manicjs';

(true);

declare const : any;
const  = (.getElementById('root')!);
.(< />);

Custom Transitions

Use CSS ::view-transition-old and ::view-transition-new pseudo-elements:

/* app/app.css */
::view-transition-old(root) {
  animation: fadeOut 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Shared Elements

Morph elements between pages using viewTransitionName:

// app/routes/index.tsx
import React from 'react';
import {  } from 'manicjs';

export function () {
  return (
    < ="/about" ="hero">
      <>My Hero</>
    </>
  );
}

// app/routes/about.tsx
export function () {
  return (
    < ="/" ="hero">
      <>My Hero</>
    </>
  );
}

Disable View Transitions

Disable View Transitions for specific navigations:

import React from 'react';
import {  } from 'manicjs';

export default function () {
  return (
    < ="/page" ="fade">
      Go to Page
    </>
  );
}

Or globally:

import {  } from 'manicjs';

(false);

View Transitions

View Transitions

What It Is

Prerequisites

Quick Start

Enable View Transitions

Global View Transitions

Custom Transitions

Shared Elements

Disable View Transitions

See Also

On this page