Astro View Transition Demo

Demo Link

This is a demo project that showcases view transitions inside of an Astro project using Astro's opt-in client-side routing made specifically for the new View Transition API.

To read more about the process behind setting up this project, check out our article which goes into greater detail on the design and development collaboration that went into building this demo.

Want to jump into the code right away? Checkout the following links to get you straight into the code in a virtual sandbox:

⚠️ IMPORTANT

The demo works best in browsers that support View Transitions (i.e. Chromium browsers), but also includes default fallback support for other browsers. Even if the browser does not support the View Transitions API, Astro will still provide in-browser navigation using one of the fallback options for a comparable experience. That said, it's recommended you view the demo while using a supported browser.

🔥 Getting Started

To get started with this project, you'll need to have Node.js and npm installed on your machine. Once you have those installed, you can follow these steps:

1. Clone this repository to your local machine.
2. Navigate to the project directory in your terminal.
3. Run npm install to install the project dependencies.
4. Run npm run dev to start the development server.
5. Open your web browser and navigate to http://localhost:4321 to view the demo.

🚀 Project Structure

This project leverages Astro's Content Collections to handle the various blog like pages. As such, the project structure contains the following folders and files:

/
├── public/
│   └── ...
├── src/
│   ├── assets/
│   │   └── ...
│   ├── components/
│   │   └── ...
│   ├── content/
│   │   └── ...
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       ├── [slug].astro
│       └── index.astro
└── package.json

Astro looks for .astro or .md files in the src/pages/ and src/content/ directories. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, are placed in the assets/ directory while background images, videos, and fonts are placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro -- --help	Get help using the Astro CLI

👀 Want to learn more?

Check out our View Transitions in Astro article which delves into the specifics on how to use view transitions inside of Astro in a simple and easy to follow way, or check out Astro's documentation on using view transitions.

🥇 Credits

This demo project was developed by Eric Fuhrmann and designed by Andrew Greeson. You can read more about that process here.

The view transition animation was inspired by Maxi Ferreira's View Transition demo.