{"id":50986733,"url":"https://github.com/jankohlbach/css-page-transition-based-on-view-transition","last_synced_at":"2026-06-19T20:02:13.613Z","repository":{"id":350449902,"uuid":"1206065086","full_name":"jankohlbach/css-page-transition-based-on-view-transition","owner":"jankohlbach","description":null,"archived":false,"fork":false,"pushed_at":"2026-04-10T13:04:16.000Z","size":9480,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-10T13:10:06.413Z","etag":null,"topics":["css","page-transition","view-transition","view-transition-api","view-transitions","view-transitions-api"],"latest_commit_sha":null,"homepage":"https://css-page-transition.jnkl.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jankohlbach.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-09T14:40:26.000Z","updated_at":"2026-04-10T13:04:19.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/jankohlbach/css-page-transition-based-on-view-transition","commit_stats":null,"previous_names":["jankohlbach/css-page-transition-based-on-view-transition"],"tags_count":null,"template":false,"template_full_name":"jankohlbach/astro-creative-base","purl":"pkg:github/jankohlbach/css-page-transition-based-on-view-transition","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jankohlbach%2Fcss-page-transition-based-on-view-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jankohlbach%2Fcss-page-transition-based-on-view-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jankohlbach%2Fcss-page-transition-based-on-view-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jankohlbach%2Fcss-page-transition-based-on-view-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jankohlbach","download_url":"https://codeload.github.com/jankohlbach/css-page-transition-based-on-view-transition/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jankohlbach%2Fcss-page-transition-based-on-view-transition/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34546200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-19T02:00:06.005Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","page-transition","view-transition","view-transition-api","view-transitions","view-transitions-api"],"created_at":"2026-06-19T20:02:12.705Z","updated_at":"2026-06-19T20:02:13.588Z","avatar_url":"https://github.com/jankohlbach.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS view-transition based page transitions\n\nHacking CSS here a bit, but I wanted to make this work.\n\nUsually, CSS view-transitions are there to morph elements from one state or page to another.\n\nOften though, page transitions are completely separate elements and effects like curtains that cover the viewport or similar.\n\nWith 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.\n\nBased on https://github.com/jankohlbach/astro-creative-base\n\n## Setup\n\nMake sure to install the dependencies:\n\n```bash\nyarn install\n```\n\n## Development Server\n\nStart the development server on http://localhost:4321\n\n```bash\nyarn dev\n```\n\n## Production\n\nBuild the application for production:\n\n```bash\nyarn build\n```\n\nLocally preview production build:\n\n```bash\nyarn preview\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjankohlbach%2Fcss-page-transition-based-on-view-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjankohlbach%2Fcss-page-transition-based-on-view-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjankohlbach%2Fcss-page-transition-based-on-view-transition/lists"}