{"id":17597978,"url":"https://github.com/cvan/gaia-navigator","last_synced_at":"2025-03-29T20:27:57.681Z","repository":{"id":31249829,"uuid":"34811333","full_name":"cvan/gaia-navigator","owner":"cvan","description":"Mirror of https://gitlab.com/Cwiiis/gaia-navigator","archived":false,"fork":false,"pushed_at":"2015-04-29T18:38:19.000Z","size":112,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-24T09:50:18.022Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/cvan.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}},"created_at":"2015-04-29T18:37:48.000Z","updated_at":"2015-04-29T18:47:13.000Z","dependencies_parsed_at":"2022-09-09T03:31:09.564Z","dependency_job_id":null,"html_url":"https://github.com/cvan/gaia-navigator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cvan%2Fgaia-navigator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cvan%2Fgaia-navigator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cvan%2Fgaia-navigator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cvan%2Fgaia-navigator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cvan","download_url":"https://codeload.github.com/cvan/gaia-navigator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246240657,"owners_count":20745914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-10-22T09:44:10.385Z","updated_at":"2025-03-29T20:27:57.661Z","avatar_url":"https://github.com/cvan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gaia-navigator\n\nGaia Navigator is a partial implementation of a specification proposal, outlined below.\n\n## Limitations\n\n* A 'wrapper' page must be used, that includes [gaia-navigator-host.js](gaia-navigator-host.js) and that contains a single iframe in the body of the document. This iframe can have its source set to the page you would like to load initially.\n* Each page must include [gaia-navigator-client.js](gaia-navigator-client.js).\n* For reverse animations to work correctly, CSS property animation-delay must always be specified together with animation-duration.\n* JavaScript navigations should use the shim history and location objects available via gnc_get_history and gnc_get_location.\n* Actual browser history will not reflect the effective navigation history.\n\n---\n\n# Navigation Transitions specification proposal\n\n## Abstract\n\nAn API will be suggested that will allow transitions to be performed between page navigations, requiring only CSS. It is intended for the API to be flexible enough to allow for animations on different pages to be performed in synchronisation, and for particular transition state to be selected on without it being necessary to interject with JavaScript.\n\n## Proposed API\n\nNavigation transitions will be specified within a specialised stylesheet. These stylesheets will be included in the document as new link rel types. Transitions can be specified for entering and exiting the document. When the document is ready to transition, these stylesheets will be applied for the specified duration, after which they will stop applying.\n\nExample syntax;\n```html\n\u003clink rel=\"transition-enter\" duration=\"0.25s\" href=\"URI\" /\u003e\n\u003clink rel=\"transition-exit\" duration=\"0.25s\" href=\"URI\" /\u003e\n```\n\nWhen navigating to a new page, the current page's transition-exit stylesheet will be referenced, and the new page's transition-enter stylesheet will be referenced.\n\nWhen navigation is operating in a backwards direction, by the user pressing the back button in browser chrome, or when initiated from JavaScript via history.back() or history.go(-1), animations will be run in reverse. That is, the current page's transition-enter stylesheet will be referenced, and animations will run in reverse, and the old page's transition-exit stylesheet will be referenced, and those animations also run in reverse.\n\n## Transitioning\n\nWhen a navigation is initiated, the old page will stay at its current position and the new page will be overlaid over the old page, but hidden. Once the new page has finished loading it will be unhidden, the old page's 'transition-exit' stylesheet will be applied and the new page's 'transition-enter' stylesheet will be applied, for the specified durations of each stylesheet.\n\nWhen navigating backwards, the CSS animations timeline will be reversed. This will have the effect of modifying the meaning of animation-direction like so;\n\n| Forwards          | Backwards         |\n| ----------------- | ----------------- |\n| normal            | reverse           |\n| reverse           | normal            |\n| alternate         | alternate-reverse |\n| alternate-reverse | alternate         |\n\nand this will also alter the start time of the animation, depending on the declared total duration of the transition. For example, if a navigation stylesheet is declared to last 0.5s and an animation has a duration of 0.25s, when navigating backwards, that animation will effectively have an animation-delay of 0.25s. Similarly, if it already had an animation-delay of 0.1s, the animation-delay going backwards would become 0.15s, to reflect the time when the animation would have ended.\n\nLayer ordering will also be reversed, that is, the page being navigated from will appear on top of the page being navigated backwards to.\n\n## Signals\n\nWhen a transition starts, a 'navigation-transition-start' NavigationTransitionEvent will be fired on the destination page. When this event is fired, the document will have had the applicable stylesheet applied and it will be visible, but will not yet have been painted on the screen since the stylesheet was applied. When the navigation transition duration is met, a 'navigation-transition-end' will be fired on the destination page. These signals can be used, amongst other things, to tidy up state and to initialise state. They can also be used to modify the DOM before the transition begins, allowing for customising the transition based on request data.\n\nJavaScript execution could potentially cause a navigation transition to run indefinitely, it is left to the user agent's general purpose JavaScript hang detection to mitigate this circumstance.\n\n## Considerations and limitations\n\nNavigation transitions will not be applied if the new page does not finish loading within 1.5 seconds of its first paint. This can be mitigated by pre-loading documents, or by the use of service workers.\n\nStylesheet application duration will be timed from the first render after the stylesheets are applied. This should either synchronise exactly with CSS animation/transition timing, or it should be longer, but it should never be shorter.\n\nAuthors should be aware that using transitions will temporarily increase the memory footprint of their application during transitions. This can be mitigated by clear separation of UI and data, and/or by using JavaScript to manipulate the document and state when navigating to avoid keeping unused resources alive.\n\nNavigation transitions will only be applied if both the navigating document has an exit transition and the target document has an enter transition. Similarly, when navigating backwards, the navigating document must have an enter transition and the target document must have an exit transition. Both documents must be on the same origin, or transitions will not apply. The exception to these rules is the first document load of the navigator. In this case, the enter transition will apply if all prior considerations are met.\n\n## Default transitions\n\nIt is possible for the user agent to specify default transitions, so that navigation within a particular origin will always include navigation transitions unless they are explicitly disabled by that origin. This can be done by specifying navigation transition stylesheets with no href attribute, or that are empty.\n\nNote that specifying default transitions in all situations may not be desirable due to the differing loading characteristics of pages on the web at large.\n\nIt is suggested that default transition stylesheets may be specified by extending the iframe element with custom 'default-transition-enter' and 'default-transition-exit' attributes.\n\n## Examples\n\nSimple slide between two pages:\n\n[page-1.html]\n```html\n\u003chead\u003e\n  \u003clink rel=\"transition-exit\" duration=\"0.25s\" href=\"page-1-exit.css\" /\u003e\n  \u003cstyle\u003e\n    body {\n      border: 0;\n      height: 100%;\n    }\n\n    #bg {\n      width: 100%;\n      height: 100%;\n      background-color: red;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"bg\" onclick=\"window.location='page-2.html'\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n```\n\n[page-1-exit.css]\n```css\n#bg {\n  animation-name: slide-left;\n  animation-duration: 0.25s;\n}\n\n@keyframes slide-left {\n  from {}\n  to { transform: translateX(-100%); }\n}\n```\n\n[page-2.html]\n```html\n\u003chead\u003e\n  \u003clink rel=\"transition-enter\" duration=\"0.25s\" href=\"page-2-enter.css\" /\u003e\n  \u003cstyle\u003e\n    body {\n      border: 0;\n      height: 100%;\n    }\n\n    #bg {\n      width: 100%;\n      height: 100%;\n      background-color: green;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"bg\" onclick=\"history.back()\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n```\n\n[page-2-enter.css]\n```css\n#bg {\n  animation-name: slide-from-left;\n  animation-duration: 0.25s;\n}\n\n@keyframes slide-from-left {\n  from { transform: translateX(100%) }\n  to {}\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcvan%2Fgaia-navigator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcvan%2Fgaia-navigator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcvan%2Fgaia-navigator/lists"}