https://github.com/jankohlbach/css-page-transition-based-on-view-transition
https://github.com/jankohlbach/css-page-transition-based-on-view-transition
css page-transition view-transition view-transition-api view-transitions view-transitions-api
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/jankohlbach/css-page-transition-based-on-view-transition
- Owner: jankohlbach
- Created: 2026-04-09T14:40:26.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-04-10T13:04:16.000Z (3 months ago)
- Last Synced: 2026-04-10T13:10:06.413Z (3 months ago)
- Topics: css, page-transition, view-transition, view-transition-api, view-transitions, view-transitions-api
- Language: TypeScript
- Homepage: https://css-page-transition.jnkl.dev
- Size: 9.04 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS view-transition based page transitions
Hacking CSS here a bit, but I wanted to make this work.
Usually, CSS view-transitions are there to morph elements from one state or page to another.
Often though, page transitions are completely separate elements and effects like curtains that cover the viewport or similar.
With this approach, I found a way to make this work purely with CSS animations, the JS needed is only to time things, send events after finishing etc.
Based on https://github.com/jankohlbach/astro-creative-base
## Setup
Make sure to install the dependencies:
```bash
yarn install
```
## Development Server
Start the development server on http://localhost:4321
```bash
yarn dev
```
## Production
Build the application for production:
```bash
yarn build
```
Locally preview production build:
```bash
yarn preview
```