[
  {
    "path": ".gitignore",
    "content": ".DS_Store\ndist\nnode_modules\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2021 Dom Christie\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Turn\nAnimate page transitions in [Turbo Drive](https://turbo.hotwired.dev/) apps.\n\n## Installation\nInstall [@hotwired/turbo](https://www.npmjs.com/package/@hotwired/turbo), then\n```\nnpm install @domchristie/turn\n```\n\n## Usage\n\n1. Include Turbo, `dist/turn.js` and `dist/turn.css` however you build your JavaScript & CSS\n2. Add `data-turn-enter` and `data-turn-exit` to the elements you wish to animate (optional if you're only using View Transitions)\n3. `import Turn from '@domchristie/turn'` and call `Turn.start()` in your application JavaScript\n4. Navigate between pages … ✨\n\n## Customizing Animations\n\nTurn adds `turn-before-exit`, `turn-exit`, and `turn-enter` classes to the HTML element at the appropriate times. Apply your own animations by scoping your animation rules with this selector. For example:\n\n```css\nhtml.turn-advance.turn-exit [data-turn-exit] {\n  animation-name: MY_ANIMATE_OUT;\n  animation-duration: .3s;\n  animation-fill-mode: forwards;\n}\n\nhtml.turn-advance.turn-enter [data-turn-enter] {\n  animation-name: MY_ANIMATE_IN;\n  animation-duration: .6s;\n  animation-fill-mode: forwards;\n}\n\n@keyframes MY_ANIMATE_OUT {\n  …\n}\n\n@keyframes MY_ANIMATE_IN {\n  …\n}\n```\n\nThis is how `turn.css` is organized, so you may want to get rid of that file altogether. `animation-fill-mode: forwards` is recommended to prevent your transitions from jumping back.\n\n### Custom Class Names\n\nThe values set in the `data-turn-exit` and `data-turn-enter` attributes will be applied as class names to that element. This lets you customize animations for each element. Styles should still be scoped by `html.turn-exit` and `html.turn-enter`.\n\n## Class List\n\nThe following class names are added to the HTML element at various time during a navigation lifecycle.\n\n### `turn-view-transitions`\nAdded on start if the device supports View Transitions, and View Transitions are enabled.\n\n### `turn-no-view-transitions`\nAdded on start if the device does not support View Transitions, or View Transitions are disabled.\n\n### `turn-advance`\nAdded when a visit starts and the action is `advance`. You'll probably want to scope most animations with this class. Removed when the navigation has completed and all animations have ended.\n\n### `turn-restore`\nAdded when a visit starts and the action is `restore`. Given the number of ways it's possible to navigate back/forward (back button, swipe left/right, `history.back()`), it's generally recommended that restoration visits are not animated. Removed when the navigation has completed and all animations have ended.\n\n### `turn-replace`\nAdded when a visit starts and the action is `replace`. Removed when the navigation has completed and all animations have ended.\n\n### `turn-before-exit`\nAdded when a visit starts. Useful for optimising animations with `will-change`. (See `turn.css` for an example.) Removed when the exit animations start.\n\n### `turn-exit`\nAdded when a visit starts. Use this to scope exit animations. Removed when the exit animations complete.\n\n### `turn-before-transition` (if View Transitions supported & enabled)\nAdded after the exit animations and any request has completed, but before the View Transitions have taken their snapshot. Useful when combining View Transitions with custom exit/enter animations. To avoid a flash of content, use this class to target exited elements, and style them in their final \"exit\" state. (See `turn.css` for an example.) Removed when the transition starts.\n\n### `turn-transition` (if View Transitions supported & enabled)\nAdding during a View Transition. Useful when combining View Transitions with custom exit/enter animations.\n\n### `turn-enter`\nAdded after any requests have completed and previous animations/transitions have completed. Removed once the animations have completed.\n\n## Events\n\n`event.details` may contain:\n- `action`: the action of the visit (`advance` or `restore`)\n- `initiator`: the element the visit was triggered from (an `a`, `form`, or `html` element if a Back/Forward navigation)\n- `referrer`: the URL the page is transitioning from\n- `url`: the URL the page is transitioning to\n- `newBody`: the incoming `<body>` that will be transitioned to\n\n### `turn:before-exit`\nDispatched before exit animations are started. `event.detail` includes:\n- `action`\n- `initiator`\n- `referrer`\n- `url`\n\n### `turn:before-transition`\nDispatched before a View Transition is started (after exit animations if present). Ideal for setting up `view-transition-name`s before the View Transition performs its capturing. `event.detail` includes:\n- `action`\n- `initiator`\n- `newBody`\n- `referrer`\n\n### `turn:before-enter`\nDispatched before enter animations are started (after Vire Transitions if present). `event.detail` includes:\n- `action`\n- `initiator`\n- `newBody`\n- `referrer`\n\n### `turn:enter`\nDispatched after the all transitions and animations have completed. `event.detail` includes:\n- `action`\n- `referrer`\n- `url`\n- `timing`: the visit's timing metrics\n\n\n### Usage with Tailwind CSS\n\nDefine animations in `tailwind.config.js`, and add a plugin that scopes the styles, e.g.:\n\n```js\nconst plugin = require('tailwindcss/plugin')\n\nmodule.exports = {\n  theme: {\n    extend: {\n      animation: {\n        exit: 'fade-out-up 0.3s cubic-bezier(0.65, 0.05, 0.35, 1) forwards',\n        enter: 'fade-in-up 0.6s cubic-bezier(0.65, 0.05, 0.35, 1) forwards'\n      },\n      keyframes: {\n        'fade-out-up': {/* … */},\n        'fade-in-up': {/* … */}\n      }\n    }\n  },\n\n  plugins: [\n    plugin(function ({ addVariant }) {\n      addVariant('turn-exit', 'html.turn-exit &')\n      addVariant('turn-enter', 'html.turn-enter &')\n    })\n  ]\n}\n```\n\nThen in your HTML:\n\n```html\n<main data-turn-exit=\"turn-exit:animate-exit\" data-turn-enter=\"turn-enter:animate-enter\">\n  <!-- … -->\n</main>\n```\n\n## Disabling Animations\n\nAdd `data-turn=\"false\"` to the `<body>` to opt out of animations from that page.\n\n(This currently rather basic, but is limited by the information available in Turbo events. Hopefully improvable if [`turbo:visit` events are fired on the initiating element](https://github.com/hotwired/turbo/pull/750).)\n\n## Tip & Tricks\n\n### 1. Animate Changes\nAvoid animating the whole `body`. Animations should target elements that change on navigation. So avoid animating persistent headers and instead animate the `main` element or just the panels/cards within it.\n\n### 2. Nesting\nNesting animating elements draws attention and brings screens to life. Add `data-turn-exit`/`data-turn-enter` attributes to elements such as headings and key images within an animating container. The compound animation effects means they'll exit faster, and enter slower than other elements. For example:\n```html\n<main data-turn-exit data-turn-enter>\n  <h1 data-turn-exit data-turn-enter>Hello, world!</h1>\n</main>\n```\n\n### 3. Optimizing Animations\nJumpy exit animations can be prevented using the `will-change` CSS property. Turn adds a `turn-before-exit` class to the HTML element just before adding the exit classes. This provides an opportunity to notify the browser of upcoming changes. For example, by default `turn.css` does the following:\n\n```css\nhtml.turn-before-exit [data-turn-exit],\nhtml.turn-exit [data-turn-exit] {\n  will-change: transform, opacity;\n}\n```\n\n### 4. Loading Spinner\nExit animations on slow requests can leave users with a blank screen. Improve the experience with a loading spinner that appears a short time after the exit animation. For example, if your exit animation take 600ms, add a spinner that starts appearing 700ms after that by using `transition-delay`. This spinner can live permanently in the `body` and only transition when the `turn-exit` class is applied:\n\n```css\n.spinner {\n  position: fixed;\n  top: 15%;\n  left: 50%;\n  transform: translateX(-50%);\n  opacity: 0;\n  transition: opacity 100ms;\n}\nhtml.turn-exit .spinner {\n  opacity: 1;\n  transition-delay: 700ms\n}\n```\n\n## Not seeing animations?\n\nCheck your device preferences to see if you have requested reduced motion. Turn will only animate transitions when the `prefers-reduced-motion` media query does not match `reduce`.\n\n## How does it work?\n\nTurn adds exit and enter classes at the appropriate times like so:\n1. on `turbo:visit` add the exit classes\n2. pause `turbo:before-render` _(wait for exit animations to complete before resuming)_\n3. on `turbo:render`, remove exit classes and add the enter classes\n4. on `turbo:load`, wait for the enter animations to complete before removing the enter classes\n\n## Credits\n\nDefault fade in/out animations adapted from [Jon Yablonski](https://jonyablonski.com/)'s [Humane By Design](https://humanebydesign.com/).\n\n## License\nCopyright © 2021+ Dom Christie and released under the MIT license.\n"
  },
  {
    "path": "examples/animate-restore/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animate Restore</title>\n\n  <link rel=\"stylesheet\" href=\"./turn.css\">\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n\n    addEventListener('click', function (event) {\n      if (event.target.dataset?.back != null) {\n        event.preventDefault()\n        document.documentElement.dataset.animateRestore = true\n        window.history.back()\n      }\n    })\n\n    addEventListener('turn:enter', function () {\n      document.documentElement.removeAttribute('data-animate-restore')\n    })\n  </script>\n</head>\n<body>\n  <nav>\n    <a href=\"one.html\">Lorem</a>\n    <a href=\"https://github.com/domchristie/turn/blob/main/examples/animations-only/\">Source</a>\n  </nav>\n  <main data-turbo=\"false\" data-turn-enter data-turn-exit>\n    <h1 data-turn-enter data-turn-exit>Turn: Animate Restore</h1>\n\n    <div class=\"timelines\">\n      <div class=\"animation-timeline\" style=\"grid-template-columns: 1fr 1fr\">\n        <div class=\"animation animation-exit\">Exit</div>\n        <div class=\"animation animation-enter\">Enter</div>\n      </div>\n    </div>\n\n    <p>This demonstrates how to animate Back/Forward navigations with <a href=\"https://github.com/domchristie/turn\">Turn</a> (without View Transitions). Tap the Lorem/Back links in the navigation bar to view, then use the browser's Back/Forward buttons to see the difference.</p>\n    <p><a href=\"../view-transitions-only\">Next example</a> or <a href=\"../../\">back to examples</a></p>\n\n    <p>Our Back link includes a <code style=\"font-size: 0.875em\">data-back</code> attribute. When this is clicked, we prevent the default, apply a <code style=\"font-size: 0.875em\">data-animate-restore</code> attribute to the HTML element, and navigate back via the history API. Then once the animations have completed, we tidy up.</p>\n\n        <pre><code>addEventListener('click', function (event) {\n  if (event.target.dataset?.back != null) {\n    event.preventDefault()\n    document.documentElement.dataset.animateRestore = true\n    window.history.back()\n  }\n})\n\naddEventListener('turn:enter', function (event) {\n  document.documentElement.removeAttribute('data-animate-restore')\n})</code></pre>\n\n  <hr>\n\n    <p>To style the animations, we use the <code style=\"font-size: 0.875em\">data-animate-restore</code> attribute to apply the standard animations.</p>\n\n    <pre><code>html[data-animate-restore].turn-restore.turn-exit [data-turn-exit],\nhtml.turn-advance.turn-exit [data-turn-exit] {\n  animation-name: fade-out-up;\n  animation-duration: .3s;\n}\n\nhtml[data-animate-restore].turn-restore.turn-enter [data-turn-enter],\nhtml.turn-advance.turn-enter [data-turn-enter] {\n  animation-name: fade-in-up;\n  animation-duration: .6s;\n}</code></pre>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/animate-restore/one.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animate Restore</title>\n\n  <link rel=\"stylesheet\" href=\"./turn.css\">\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n\n    addEventListener('turbo:click', function (event) {\n      if (event.target.dataset?.back != null) {\n        event.detail.originalEvent.preventDefault()\n        event.preventDefault()\n        document.documentElement.dataset.animateRestore = true\n        window.history.back()\n      }\n    })\n    addEventListener('turn:enter', function (event) {\n      document.documentElement.removeAttribute('data-animate-restore')\n    })\n  </script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\" data-back>Back</a>\n    <a href=\"https://github.com/domchristie/turn\">Source</a>\n  </nav>\n  <main data-turn-enter data-turn-exit>\n    <h1 data-turn-enter data-turn-exit>Lorem</h1>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/animate-restore/turn.css",
    "content": "[data-turn-exit],\n[data-turn-enter] {\n  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);\n  animation-fill-mode: forwards;\n}\n\nhtml[data-animate-restore].turn-restore.turn-exit [data-turn-exit],\nhtml.turn-advance.turn-exit [data-turn-exit] {\n  animation-name: fade-out-up;\n  animation-duration: .3s;\n}\n\nhtml[data-animate-restore].turn-restore.turn-enter [data-turn-enter],\nhtml.turn-advance.turn-enter [data-turn-enter] {\n  animation-name: fade-in-up;\n  animation-duration: .6s;\n}\n\nhtml.turn-before-exit [data-turn-exit],\nhtml.turn-exit [data-turn-exit] {\n  will-change: transform, opacity;\n}\n\n@keyframes fade-out-up {\n  0% {\n    opacity: 1;\n    transform: translateZ(0)\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -4rem, 0)\n  }\n}\n\n@keyframes fade-in-up {\n  0% {\n    opacity: 0;\n    transform: translate3d(0, 4rem, 0)\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateZ(0)\n  }\n}\n"
  },
  {
    "path": "examples/animations-only/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animations Only</title>\n\n  <link rel=\"stylesheet\" href=\"./turn.css\">\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n  </script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\" aria-current>Turn</a>\n    <a href=\"one.html\">Lorem</a>\n    <a href=\"https://github.com/domchristie/turn/blob/main/examples/animations-only/\">Source</a>\n  </nav>\n  <main data-turbo=\"false\" data-turn-enter data-turn-exit>\n    <h1 data-turn-enter data-turn-exit>Turn: Basic</h1>\n\n    <div class=\"timelines\">\n      <div class=\"animation-timeline\" style=\"grid-template-columns: 1fr 1fr\">\n        <div class=\"animation animation-exit\">Exit</div>\n        <div class=\"animation animation-enter\">Enter</div>\n      </div>\n    </div>\n\n    <p>This demonstrates page animations with <a href=\"https://github.com/domchristie/turn\">Turn</a> (without View Transitions). Tap the Turn/Lorem links in the navigation bar to view.</p>\n    <p><a href=\"../view-transitions-only\">Next example</a> or <a href=\"../../\">back to examples</a></p>\n\n    <pre><code>/* Set up animation timings for targeted elements */\n[data-turn-exit],\n[data-turn-enter] {\n  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);\n  animation-fill-mode: forwards;\n}\n\n/* Apply exit animations */\nhtml.turn-advance.turn-exit [data-turn-exit] {\n  animation-name: fade-out-up;\n  animation-duration: .3s;\n}\n\n/* Apply enter animations */\nhtml.turn-advance.turn-enter [data-turn-enter] {\n  animation-name: fade-in-up;\n  animation-duration: .6s;\n}\n\n/* For smoothness */\nhtml.turn-before-exit [data-turn-exit],\nhtml.turn-exit [data-turn-exit] {\n  will-change: transform, opacity;\n}\n\n/* (Define animation keyframes here) */</code></pre>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/animations-only/one.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animations Only</title>\n\n  <link rel=\"stylesheet\" href=\"./turn.css\">\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n  </script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\">Turn</a>\n    <a  aria-current href=\"one.html\">Lorem</a>\n    <a href=\"https://github.com/domchristie/turn\">Source</a>\n  </nav>\n  <main data-turn-enter data-turn-exit>\n    <h1 data-turn-enter data-turn-exit>Lorem</h1>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/animations-only/turn.css",
    "content": "/* Temporary fix for https: //github.com/domchristie/turn/issues/13 */\n.turn-view-transitions.turn-transition [data-turn-enter],\n.turn-view-transitions.turn-before-transition [data-turn-enter] {\n  opacity: 0;\n}\n\n[data-turn-exit],\n[data-turn-enter] {\n  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);\n  animation-fill-mode: forwards;\n}\n\nhtml.turn-advance.turn-exit [data-turn-exit] {\n  animation-name: fade-out-up;\n  animation-duration: .3s;\n}\n\nhtml.turn-advance.turn-enter [data-turn-enter] {\n  animation-name: fade-in-up;\n  animation-duration: .6s;\n}\n\nhtml.turn-before-exit [data-turn-exit],\nhtml.turn-exit [data-turn-exit] {\n  will-change: transform, opacity;\n}\n\n@keyframes fade-out-up {\n  0% {\n    opacity: 1;\n    transform: translateZ(0)\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -4rem, 0)\n  }\n}\n\n@keyframes fade-in-up {\n  0% {\n    opacity: 0;\n    transform: translate3d(0, 4rem, 0)\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateZ(0)\n  }\n}\n"
  },
  {
    "path": "examples/dynamic-view-transitions/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animations Only</title>\n\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n  </script>\n  <script src=\"script.js\"></script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\" aria-current>Videos</a>\n    <a href=\"https://github.com/domchristie/turn/blob/main/examples/view-transitions-only/\">Source</a>\n  </nav>\n  <main>\n    <h1>Turn: Dynamic Names</h1>\n\n    <ul class=\"videos\">\n      <li>\n        <a\n          href=\"one.html\"\n          style=\"font-family: system-ui; font-weight: 800; display: block\"\n          id=\"video_1_title\"\n          data-transition=\"video_1 video_1_title\"\n          data-view-transition-name=\"title\">Big Buck Bunny</a>\n        <video\n          controls\n          src=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\n          poster=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg\"\n          id=\"video_1\"\n          data-turbo-permanent\n          data-view-transition-name=\"video\"></video>\n      </li>\n      <li>\n        <a\n          href=\"two.html\"\n          id=\"video_2_title\"\n          style=\"font-family: system-ui; font-weight: 800; display: block\"\n          data-transition=\"video_2 video_2_title\"\n          data-view-transition-name=\"title\">Elephants Dream</a>\n        <video\n          controls\n          src=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4\"\n          poster=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg\"\n          id=\"video_2\"\n          data-turbo-permanent\n          data-view-transition-name=\"video\"></video>\n      </li>\n    </ul>\n\n    <form action=\"one.html\" method=\"get\" data-transition=\"video_1 video_1_title\"><input type=\"submit\"></form>\n\n    <p hidden id=\"no-view-transitions\"><em>Your browser does not support View Transitions, so you'll not see any animations.</em></p>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/dynamic-view-transitions/one.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animations Only</title>\n\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n  </script>\n  <script src=\"script.js\"></script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\" data-transition=\"video_1 video_1_title\">Videos</a>\n    <a href=\"https://github.com/domchristie/turn\">Source</a>\n  </nav>\n  <main>\n    <h1 id=\"video_1_title\" data-view-transition-name=\"title\">Big Buck Bunny</h1>\n    <video id=\"video_1\" data-turbo-permanent data-view-transition-name=\"video\" controls src=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\" poster=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg\"></video>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/dynamic-view-transitions/script.js",
    "content": "window.addEventListener('turn:before-transition', function ({ detail }) {\n  let { referrer, action, initiator, newBody } = detail\n\n  // For restoration visits, make a _reasonable_ guess at which link/form might have\n  // visited the current page (`referrer`), then apply those names.\n  if (action === 'restore') {\n    const selector = 'a[data-transition], form[data-transition]'\n    initiator = [...newBody.querySelectorAll(selector)].find(\n      i => i.href === referrer || i.action === referrer\n    ) || document.documentElement\n  } else {\n    reset()\n  }\n\n  apply(initiator)\n  apply(initiator, newBody)\n})\n\nfunction apply (initiator, body = document.body) {\n  if (!initiator.dataset.transition) return\n\n  const viewTransitionIds = initiator.dataset.transition.split(' ')\n\n  viewTransitionIds.forEach(function (id) {\n    const element = body.querySelector(`[id='${id}']`)\n    if (element) {\n      element.style.viewTransitionName = element.dataset.viewTransitionName\n    }\n  })\n}\n\nfunction reset () {\n  document.querySelectorAll('[data-view-transition-name]').forEach(function (e) {\n    e.style.viewTransitionName = ''\n  })\n}\n"
  },
  {
    "path": "examples/dynamic-view-transitions/two.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animations Only</title>\n\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n  </script>\n  <script src=\"script.js\"></script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\" data-transition=\"video_2 video_2_title\">Videos</a>\n    <a href=\"https://github.com/domchristie/turn\">Source</a>\n  </nav>\n  <main>\n    <h1 id=\"video_2_title\" data-view-transition-name=\"title\">Elephants Dream</h1>\n    <video id=\"video_2\" data-turbo-permanent data-view-transition-name=\"video\" controls src=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4\" poster=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg\"></video>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/fallback/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animations Only</title>\n\n  <link rel=\"stylesheet\" href=\"./turn.css\">\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n  </script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\" aria-current>Turn</a>\n    <a href=\"one.html\">Lorem</a>\n    <a href=\"https://github.com/domchristie/turn/blob/main/examples/fallback/\">Source</a>\n  </nav>\n  <main data-turbo=\"false\" data-turn-enter data-turn-exit>\n    <h1 data-turn-enter data-turn-exit>Turn: Fallback</h1>\n    <div class=\"timelines\">\n      <div class=\"animation-timeline\" style=\"grid-template-columns: 1fr\">\n        <div class=\"animation animation-transition\">View Transition</div>\n      </div>\n      <div class=\"or\">or</div>\n      <div class=\"animation-timeline\" style=\"grid-template-columns: 1fr 1fr\">\n        <div class=\"animation animation-exit\">Exit</div>\n        <div class=\"animation animation-enter\">Enter</div>\n      </div>\n    </div>\n    <p>This demonstrates how <a href=\"https://github.com/domchristie/turn\">Turn</a> can be used with View Transitions, falling back to custom CSS animations if not supported.</p>\n    <p><a href=\"../hybrid-basic/\">Next example</a> or <a href=\"../../\">back to examples</a></p>\n\n    <pre><code>/* (Excerpt) */\n\n/* Scope animations with `html.turn-no-view-transitions` */\nhtml.turn-no-view-transitions.turn-advance.turn-exit [data-turn-exit] {\n  animation-name: fade-out-up;\n  animation-duration: .3s;\n}\nhtml.turn-no-view-transitions.turn-advance.turn-enter [data-turn-enter] {\n  animation-name: fade-in-up;\n  animation-duration: .6s;\n}</code></pre>\n    <hr>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/fallback/one.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animations Only</title>\n\n  <link rel=\"stylesheet\" href=\"./turn.css\">\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n  </script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\">Turn</a>\n    <a  aria-current href=\"one.html\">Lorem</a>\n    <a href=\"https://github.com/domchristie/turn\">Source</a>\n  </nav>\n  <main data-turn-enter data-turn-exit>\n    <h1 data-turn-enter data-turn-exit>Lorem</h1>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/fallback/turn.css",
    "content": "[data-turn-exit],\n[data-turn-enter] {\n  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);\n  animation-fill-mode: forwards;\n}\n\nhtml.turn-no-view-transitions.turn-advance.turn-exit [data-turn-exit] {\n  animation-name: fade-out-up;\n  animation-duration: .3s;\n}\n\nhtml.turn-no-view-transitions.turn-advance.turn-enter [data-turn-enter] {\n  animation-name: fade-in-up;\n  animation-duration: .6s;\n}\n\nhtml.turn-no-view-transitions.turn-before-exit [data-turn-exit],\nhtml.turn-no-view-transitions.turn-exit [data-turn-exit] {\n  will-change: transform, opacity;\n}\n\n@keyframes fade-out-up {\n  0% {\n    opacity: 1;\n    transform: translateZ(0)\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -4rem, 0)\n  }\n}\n\n@keyframes fade-in-up {\n  0% {\n    opacity: 0;\n    transform: translate3d(0, 4rem, 0)\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateZ(0)\n  }\n}\n"
  },
  {
    "path": "examples/hybrid-advanced/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animations Only</title>\n\n  <link rel=\"stylesheet\" href=\"./turn.css\">\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n  </script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\" aria-current>Turn</a>\n    <a href=\"one.html\">Lorem</a>\n    <a href=\"https://github.com/domchristie/turn/blob/main/examples/hybrid-advanced/\">Source</a>\n  </nav>\n  <main data-turbo=\"false\" data-turn-enter data-turn-exit>\n    <h1 data-turn-enter data-turn-exit>Turn: Hybrid Advanced</h1>\n    <div class=\"timelines\">\n      <div class=\"animation-timeline\" style=\"grid-template-columns: 1fr 1fr\">\n        <div class=\"animation animation-exit\">Exit</div>\n        <div class=\"animation animation-transition\">View Transition</div>\n      </div>\n      <div class=\"or\">or</div>\n      <div class=\"animation-timeline\" style=\"grid-template-columns: 1fr 1fr\">\n        <div class=\"animation animation-exit\">Exit</div>\n        <div class=\"animation animation-enter\">Enter</div>\n      </div>\n    </div>\n    <p>This is similar to the <a href=\"../hybrid-basic/\">Hybrid Basic example</a>, but instead of waiting for the View Transition to complete, the transition handles enter animations. </p>\n    <p><a href=\"../../\">Back to Examples</a></p>\n\n    <pre><code>/* (Excerpt) */\n\n/* Apply exit animations */\nhtml.turn-advance.turn-exit [data-turn-exit] {\n  animation-name: fade-out-up;\n  animation-duration: .3s;\n}\n\n/* Only animate enter when View Transitions not supported */\nhtml.turn-no-view-transitions.turn-advance.turn-enter [data-turn-enter] {\n  animation-name: fade-in-up;\n  animation-duration: .6s;\n}\n\n/* Apply enter animations to new View Transition elements */\nhtml.turn-advance::view-transition-new(root),\nhtml.turn-advance::view-transition-new(heading) {\n  animation-name: fade-in-up;\n  animation-duration: .6s;\n}</code></pre>\n    <hr>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/hybrid-advanced/one.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animations Only</title>\n\n  <link rel=\"stylesheet\" href=\"./turn.css\">\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n  </script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\">Turn</a>\n    <a  aria-current href=\"one.html\">Lorem</a>\n    <a href=\"https://github.com/domchristie/turn\">Source</a>\n  </nav>\n  <main data-turn-enter data-turn-exit>\n    <h1 data-turn-enter data-turn-exit>Lorem</h1>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/hybrid-advanced/turn.css",
    "content": "[data-turn-exit],\n[data-turn-enter] {\n  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);\n  animation-fill-mode: forwards;\n}\n\nhtml.turn-advance.turn-exit [data-turn-exit] {\n  animation-name: fade-out-up;\n  animation-duration: .3s;\n}\n\nhtml.turn-no-view-transitions.turn-advance.turn-enter [data-turn-enter] {\n  animation-name: fade-in-up;\n  animation-duration: .6s;\n}\n\nhtml.turn-advance::view-transition-new(root),\nhtml.turn-advance::view-transition-new(heading) {\n  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);\n  animation-name: fade-in-up;\n  animation-duration: .6s;\n}\n\nhtml.turn-advance.turn-transition::view-transition-new(heading) {\n  --offset: 8rem;\n}\n\nhtml.turn-advance.turn-before-transition [data-turn-exit],\nhtml.turn-no-view-transitions.turn-advance.turn-transition [data-turn-exit] {\n  opacity: 0;\n}\n\nhtml.turn-before-exit [data-turn-exit],\nhtml.turn-exit [data-turn-exit] {\n  will-change: transform, opacity;\n}\n\n@keyframes fade-out-up {\n  0% {\n    opacity: 1;\n    transform: translateZ(0)\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate3d(0, calc(var(--offset, 4rem) * -1), 0)\n  }\n}\n\n@keyframes fade-in-up {\n  0% {\n    opacity: 0;\n    transform: translate3d(0, var(--offset, 4rem), 0)\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateZ(0)\n  }\n}\n"
  },
  {
    "path": "examples/hybrid-basic/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animations Only</title>\n\n  <link rel=\"stylesheet\" href=\"./turn.css\">\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n  </script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\" aria-current>Turn</a>\n    <a href=\"one.html\">Lorem</a>\n    <a href=\"https://github.com/domchristie/turn/blob/main/examples/hybrid-basic/\">Source</a>\n  </nav>\n  <main data-turbo=\"false\" data-turn-enter data-turn-exit>\n    <h1 data-turn-enter data-turn-exit>Turn: Hybrid Basic</h1>\n    <div class=\"animation-timeline\" style=\"grid-template-columns: 1fr 1fr 1fr\">\n      <div class=\"animation animation-exit\">Exit</div>\n      <div class=\"animation animation-transition\">(View Transition)</div>\n      <div class=\"animation animation-enter\">Enter</div>\n    </div>\n    <p>This demonstrates using both View Transitions and standard CSS animations. Standard animations are used for exit and enter, whereas View Transitions are used to transition the nav. Exit animations are applied immediately, then once the new page has loaded, it waits for the View Transition to complete, before performing the enter animation. Browsers that do not support View Transitions will still see the exit/enter animations, but the nav won't be transitioned.</p>\n    <p><a href=\"../hybrid-advanced/\">Next example</a> or <a href=\"../../\">back to examples</a></p>\n    <pre><code>/* (Excerpt) */\n\n/* Apply exit/enter animations as before */\nhtml.turn-advance.turn-exit [data-turn-exit] {\n  animation-name: fade-out-up;\n  animation-duration: .3s;\n}\n\nhtml.turn-advance.turn-enter [data-turn-enter] {\n  animation-name: fade-in-up;\n  animation-duration: .6s;\n}\n\n/* Hide flash of content during transition */\nhtml.turn-advance.turn-before-transition [data-turn-exit],\nhtml.turn-advance.turn-transition [data-turn-exit] {\n  opacity: 0;\n}</code></pre>\n    <hr>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/hybrid-basic/one.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animations Only</title>\n\n  <link rel=\"stylesheet\" href=\"./turn.css\">\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n  </script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\">Turn</a>\n    <a  aria-current href=\"one.html\">Lorem</a>\n    <a href=\"https://github.com/domchristie/turn\">Source</a>\n  </nav>\n  <main data-turn-enter data-turn-exit>\n    <h1 data-turn-enter data-turn-exit>Lorem</h1>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/hybrid-basic/turn.css",
    "content": "[data-turn-exit],\n[data-turn-enter] {\n  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);\n  animation-fill-mode: forwards;\n}\n\nhtml.turn-advance.turn-exit [data-turn-exit] {\n  animation-name: fade-out-up;\n  animation-duration: .3s;\n}\n\nhtml.turn-advance.turn-enter [data-turn-enter] {\n  animation-name: fade-in-up;\n  animation-duration: .6s;\n}\n\nhtml.turn-advance.turn-before-transition [data-turn-exit],\nhtml.turn-advance.turn-transition [data-turn-exit] {\n  opacity: 0;\n}\n\nhtml.turn-before-exit [data-turn-exit],\nhtml.turn-exit [data-turn-exit] {\n  will-change: transform, opacity;\n}\n\n@keyframes fade-out-up {\n  0% {\n    opacity: 1;\n    transform: translateZ(0)\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -4rem, 0)\n  }\n}\n\n@keyframes fade-in-up {\n  0% {\n    opacity: 0;\n    transform: translate3d(0, 4rem, 0)\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateZ(0)\n  }\n}\n"
  },
  {
    "path": "examples/theme.css",
    "content": "/* ========= */\n/* = Theme = */\n/* ========= */\n\n/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */\n\n:root {\n  --step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);\n  --step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);\n  --step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);\n  --step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);\n  --step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);\n  --step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);\n  --step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);\n  --step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);\n}\n\nbody {\n  margin: 0 auto 2.25em 0;\n  font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;\n  background-color: white;\n  font-size: var(--step-1);\n  color: black;\n  line-height: 1.5;\n  background: #f9f9f9;\n}\n\nol {\n  margin: 1em 0;\n  padding-left: 1.25em;\n}\n\nol li + li {\n  margin-top: 0.5em;\n}\n\na {\n  color: #06f;\n}\n\nnav {\n  display: flex;\n  background-color: white;\n  border-bottom: 2px solid #e6e6e6;\n  padding: 1rem 2.5%;\n  position: relative;\n  z-index: 10;\n  font-family: system-ui, sans-serif;\n  contain: layout;\n  view-transition-name: nav;\n}\n\nnav a {\n  position: relative;\n  display: block;\n  font-weight: bold;\n  text-decoration: none;\n}\n\nnav a[aria-current] {\n  color: black;\n}\n\nnav a[aria-current]::after {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 4px;\n  background-color: black;\n  left: 0;\n  right: 0;\n  bottom: -6px;\n  contain: layout;\n  view-transition-name: current;\n}\n\nnav a + a {\n  margin-left: 2.5%;\n}\n\nnav a:last-child {\n  margin-left: auto;\n}\n\nmain {\n  width: 95%;\n  max-width: 48rem;\n  margin: 0 auto;\n  contain: layout;\n}\n\nh1 {\n  margin: 0.667em 0;\n  font-family: system-ui, sans-serif;\n  font-size: var(--step-5);\n  font-weight: 800;\n  color: black;\n  line-height: 1;\n  contain: layout;\n  view-transition-name: heading;\n}\n\nh2 {\n  font-size: var(--step-2);\n  margin: 0.667em 0;\n  font-family: system-ui, sans-serif;\n}\n\np {\n  line-height: 1.4;\n  margin: 1em 0;\n}\n\npre {\n  width: 100%;\n  overflow-x: auto;\n  font-size: var(--step-0);\n}\n\ncode {\n  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;\n}\n\n.timelines {\n  text-align: center;\n}\n\n.animation-timeline {\n  display: grid;\n}\n\n.animation {\n  font-family: system-ui, sans-serif;\n  font-weight: 700;\n  text-transform: uppercase;\n  font-size: var(--step--1);\n  padding: 0.25rem 0.5rem;\n  color: white;\n  letter-spacing: 0.05em;\n}\n\n.animation-exit {\n  text-align: left;\n  background-image: linear-gradient(to right, black, white);\n}\n\n.animation-enter {\n  text-align: right;\n  background-image: linear-gradient(to left, black, white);\n}\n\n.animation-transition {\n  text-align: center;\n  color: black;\n  background-image: linear-gradient(to left, black, white, white, black);\n}\n\n.or {\n  font-family: system-ui, sans-serif;\n  font-size: var(--step--1);\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\nhtml.turn-no-view-transitions #no-view-transitions {\n  color: darkred;\n  display: block;\n}\n\n.videos {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--step--2);\n}\n\nvideo {\n  aspect-ratio: 16 / 9;\n  object-fit: cover;\n  width: 100%;\n  contain: layout;\n}\n\n::view-transition-old(title) {\n  display: none;\n}\n\n::view-transition-new(title) {\n  animation: none;\n}\n\n::view-transition-old(video) {\n  display: none;\n}\n\n::view-transition-new(video) {\n  animation: none;\n}\n"
  },
  {
    "path": "examples/view-transitions-only/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animations Only</title>\n\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n  </script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\" aria-current>Turn</a>\n    <a href=\"one.html\">Lorem</a>\n    <a href=\"https://github.com/domchristie/turn/blob/main/examples/view-transitions-only/\">Source</a>\n  </nav>\n  <main data-turbo=\"false\">\n    <h1>Turn: View Transitions</h1>\n    <div class=\"timelines\">\n      <div class=\"animation-timeline\" style=\"grid-template-columns: 1fr\">\n        <div class=\"animation animation-transition\">View Transition</div>\n      </div>\n    </div>\n\n    <p>This demonstrates animated page navigations with View Transitions and <a href=\"https://github.com/domchristie/turn\">Turn</a>. Tap the Turn/Lorem links in the navigation bar to view. No custom CSS is required for the default animations.</p>\n\n    <p hidden id=\"no-view-transitions\"><em>Your browser does not support View Transitions, so you'll not see any animations.</em></p>\n    <p><a href=\"../fallback/\">Next example</a> or <a href=\"../../\">back to examples</a></p>\n    <hr>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "examples/view-transitions-only/one.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn Demo: Animations Only</title>\n\n  <link rel=\"stylesheet\" href=\"../theme.css\">\n  <script src=\"https://unpkg.com/@hotwired/turbo\"></script>\n  <script type=\"module\">\n    import Turn from '../../src/turn.js'\n    Turn.start()\n  </script>\n</head>\n<body>\n  <nav>\n    <a href=\"index.html\">Turn</a>\n    <a  aria-current href=\"one.html\">Lorem</a>\n    <a href=\"https://github.com/domchristie/turn\">Source</a>\n  </nav>\n  <main>\n    <h1>Lorem</h1>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>\n    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Turn: Animate Page Transitions in Turbo Drive Apps</title>\n  <link rel=\"stylesheet\" href=\"./examples/theme.css\">\n</head>\n<body>\n  <nav>\n    <a href=\"https://github.com/domchristie/turn\">Source</a>\n  </nav>\n  <main>\n    <h1>Turn</h1>\n    <p>Turn is a library for animating page transitions in Turbo Drive apps. It applies various class names to the HTML element during the lifecycle of a navigation. Targeted elements can then use these classes to apply animations. It supports View Transitions and can be used with a combination of the two approches.</p>\n    <h2>Examples</h2>\n    <ol>\n      <li><a href=\"./examples/animations-only/\">Basic</a>: immediate exit animations, followed by enter animations (without View Transitions)</li>\n      <li><a href=\"./examples/view-transitions-only/\">View Transitions</a>: transitions common elements between pages (where supported, without a fallback)</li>\n      <li><a href=\"./examples/fallback/\">Fallback</a>: animate with View Transitions, with a fallback to custom exit/enter animations</li>\n      <li><a href=\"./examples/hybrid-basic/\">Hybrid Basic</a>: combines custom CSS exit and enter animations with View Transitions for common elements between pages</li>\n      <li><a href=\"./examples/hybrid-advanced/\">Hybrid Advanced</a>: similar to the basic example but only uses a custom CSS exit animation; the enter animations are achieved with a View Transition</li>\n      <li><a href=\"./examples/animate-restore/\">Animate Restore</a>: animating restoration visits from native controls is generally discouraged, but if your app has Back links, this approach provides a nice user experience</li>\n    </ol>\n    <!-- <p><a href=\"https://github.com/domchristie/turn\">Turn</a> is a JavaScript library for animating page navigations in <a href=\"https://turbo.hotwired.dev/\">Turbo Drive</a> applications. It works both with and without <a href=\"https://developer.chrome.com/docs/web-platform/view-transitions/\">View Transitions</a>, or and you can use a combination of View Transitions and custom CSS animations.</p> -->\n  </main>\n</body>\n</html>\n"
  },
  {
    "path": "one.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <link rel=\"stylesheet\" href=\"./examples/theme.css\">\n  <meta http-equiv=\"refresh\" content=\"0; url=./\">\n</head>\n<body>\n</body>\n</html>\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"@domchristie/turn\",\n  \"version\": \"3.1.1\",\n  \"type\": \"module\",\n  \"description\": \"Animate page transitions in Turbo Drive apps.\",\n  \"main\": \"dist/turn.min.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build\": \"rollup --config && cp turn.css dist/turn.css\",\n    \"prepare\": \"npm run build\",\n    \"start\": \"rollup --config --watch\",\n    \"test\": \"npx standard\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/domchristie/turn.git\"\n  },\n  \"keywords\": [\n    \"hotwire\",\n    \"turbo\",\n    \"animations\"\n  ],\n  \"author\": \"Dom Christie\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/domchristie/turn/issues\"\n  },\n  \"homepage\": \"https://github.com/domchristie/turn#readme\",\n  \"devDependencies\": {\n    \"rollup\": \"^2.79.1\",\n    \"rollup-plugin-terser\": \"^7.0.2\",\n    \"standard\": \"^17.0.0\"\n  },\n  \"peerDependencies\": {\n    \"@hotwired/turbo\": \"^7\"\n  }\n}\n"
  },
  {
    "path": "rollup.config.js",
    "content": "import { terser } from 'rollup-plugin-terser'\n\nexport default {\n  input: 'src/turn.js',\n  output: [\n    {\n      file: 'dist/turn.js'\n    },\n    {\n      file: 'dist/turn.min.js',\n      plugins: [terser()]\n    }\n  ]\n}\n"
  },
  {
    "path": "src/animation-turn.js",
    "content": "import Animations from './animations.js'\nimport BaseTurn from './base-turn.js'\n\nexport default class AnimationTurn extends BaseTurn {\n  static supported = true\n\n  exit (detail) {\n    const exitAnimations = new Animations('[data-turn-exit]')\n\n    let resolveExit\n    this.animateOut = Promise.all([\n      exitAnimations.ended,\n      new Promise((resolve) => { resolveExit = resolve })\n    ])\n\n    this.addClasses('before-exit')\n    this.dispatch('before-exit', { detail })\n\n    window.requestAnimationFrame(() => {\n      exitAnimations.start(() => {\n        this.addClasses(this.direction)\n        this.addClasses('exit')\n      })\n      this.removeClasses('before-exit')\n      resolveExit()\n    })\n  }\n\n  async beforeEnter (detail) {\n    await this.animateOut\n    this.removeClasses('exit')\n    if (this.animateIn) await this.animateIn // only present on post-preview enters\n    else {\n      this.dispatch('before-enter', {\n        detail: { ...detail, action: this.action }\n      })\n    }\n  }\n\n  enter () {\n    const enterAnimations = new Animations('[data-turn-enter]')\n    this.animateIn = enterAnimations.ended\n    enterAnimations.start(() => this.addClasses('enter'))\n    return this.animateIn\n  }\n\n  async complete (detail) {\n    this.removeClasses('enter')\n    this.removeClasses(this.direction)\n    this.dispatch('enter', { detail: { ...detail, action: this.action } })\n  }\n\n  abort () {\n    this.removeClasses('before-exit')\n    this.removeClasses('exit')\n    this.removeClasses('enter')\n    this.removeClasses(this.direction)\n  }\n\n  get finished () {\n    return this.animateIn\n  }\n}\n"
  },
  {
    "path": "src/animations.js",
    "content": "\nimport { animationsEnd } from './helpers.js'\n\nexport default class Animations {\n  constructor (selector) {\n    this.selector = selector\n    this.ended = new Promise((resolve) => { this.resolve = resolve })\n  }\n\n  async start (applyAnimations) {\n    applyAnimations()\n    const elements = [...document.querySelectorAll(this.selector)]\n\n    if (elements.every((e) => e.getAnimations().length)) {\n      await animationsEnd(this.selector)\n      this.resolve()\n    } else {\n      this.resolve()\n    }\n  }\n}\n"
  },
  {
    "path": "src/base-turn.js",
    "content": "import { camelCase, pascalCase } from './helpers.js'\n\nconst DEFAULT_OPTIONS = {\n  animateRestore: false\n}\n\nexport default class BaseTurn {\n  constructor (action, direction = 'none', options = {}) {\n    this.action = action\n    this.direction = direction\n    this.options = { ...DEFAULT_OPTIONS, ...options }\n    this.beforeExitClasses = new Set()\n    this.exitClasses = new Set()\n    this.enterClasses = new Set()\n    this.beforeTransitionClasses = new Set()\n    this.transitionClasses = new Set()\n    this.forwardClasses = new Set()\n    this.backClasses = new Set()\n    this.noneClasses = new Set()\n  }\n\n  addClasses (type) {\n    document.documentElement.classList.add(`turn-${type}`)\n\n    Array.from(document.querySelectorAll(`[data-turn-${type}]`)).forEach((element) => {\n      element.dataset[`turn${pascalCase(type)}`].split(/\\s+/).forEach((klass) => {\n        if (klass) {\n          element.classList.add(klass)\n          this[`${camelCase(type)}Classes`].add(klass)\n        }\n      })\n    })\n  }\n\n  removeClasses (type) {\n    document.documentElement.classList.remove(`turn-${type}`)\n\n    Array.from(document.querySelectorAll(`[data-turn-${type}]`)).forEach((element) => {\n      this[`${camelCase(type)}Classes`].forEach((klass) => element.classList.remove(klass))\n    })\n  }\n\n  dispatch (eventName, { target = document, detail = {}, bubbles = true, cancelable = true } = {}) {\n    const type = `turn:${eventName}`\n    const event = new window.CustomEvent(type, { detail, bubbles, cancelable })\n    target.dispatchEvent(event)\n    return event\n  }\n}\n"
  },
  {
    "path": "src/controller.js",
    "content": "import NullTurn from './null-turn.js'\nimport AnimationTurn from './animation-turn.js'\nimport ViewTransitionTurn from './view-transition-turn.js'\n\nconst VIEW_TRANSITIONS = 'turn-view-transitions'\nconst NO_VIEW_TRANSITIONS = 'turn-no-view-transitions'\nconst ACTIONS = ['advance', 'restore', 'replace']\n\nexport default class Controller {\n  constructor (config) {\n    this.config = config\n  }\n\n  start () {\n    this.animationTurn = new NullTurn()\n    this.viewTransitionTurn = new NullTurn()\n    addSupportClass(this.config)\n    this.currentUrl = window.location.toString()\n  }\n\n  stop () {\n    this.animationTurn.abort()\n    this.viewTransitionTurn.abort()\n    this.animationTurn = new NullTurn()\n    this.viewTransitionTurn = new NullTurn()\n    removeSupportClasses()\n    delete this.initiator\n    delete this.currentUrl\n  }\n\n  click (event) {\n    this.initiator = event.target\n  }\n\n  submitStart (event) {\n    this.initiator = event.target\n  }\n\n  visit (event) {\n    this.reset(event)\n\n    this.animationTurn = create(AnimationTurn, event.detail.action, event.detail.direction)\n    this.viewTransitionTurn = create(ViewTransitionTurn, event.detail.action, event.detail.direction)\n\n    this.animationTurn.exit({\n      ...event.detail,\n      referrer: this.currentUrl,\n      initiator: this.initiator\n    })\n  }\n\n  async beforeRender (event) {\n    event.preventDefault()\n\n    const detail = {\n      newBody: event.detail.newBody,\n      referrer: this.currentUrl,\n      initiator: this.initiator\n    }\n    await this.animationTurn.beforeEnter(detail)\n\n    this.hasPreview\n      ? await this.viewTransitionTurn.finished\n      : await this.viewTransitionTurn.beforeEnter(detail)\n\n    if (this.isPreview) this.hasPreview = true\n    event.detail.resume()\n  }\n\n  render () {\n    this.currentUrl = window.location.toString()\n    delete this.initiator\n\n    const isInitialRender = this.isPreview || !this.hasPreview\n    if (isInitialRender) {\n      this._render = this.viewTransitionTurn.enter()\n        .then(() => this.animationTurn.enter())\n    }\n  }\n\n  async load (event) {\n    await this._render\n    removeActionClasses()\n    this.animationTurn.complete({\n      ...event.detail,\n      referrer: this.currentUrl\n    })\n  }\n\n  popstate (event) {\n    const fixNonRestoreBack = this.animationTurn.action !== 'restore'\n    fixNonRestoreBack && this.animationTurn.abort()\n  }\n\n  get isPreview () {\n    return document.documentElement.hasAttribute('data-turbo-preview')\n  }\n\n  reset (event) {\n    removeActionClasses()\n    addActionClass(event.detail.action)\n    this.hasPreview = undefined\n    this._render = undefined\n    this.animationTurn.abort()\n    this.viewTransitionTurn.abort()\n    if (event.detail.action === 'restore' || !this.initiator) {\n      this.initiator = document.documentElement\n    }\n  }\n}\n\nfunction addSupportClass (config) {\n  document.documentElement.classList.add(\n    ViewTransitionTurn.supported ? VIEW_TRANSITIONS : NO_VIEW_TRANSITIONS\n  )\n}\n\nfunction removeSupportClasses () {\n  document.documentElement.classList.remove(\n    ViewTransitionTurn.supported\n      ? VIEW_TRANSITIONS\n      : NO_VIEW_TRANSITIONS\n  )\n}\n\nfunction addActionClass (action) {\n  document.documentElement.classList.add(`turn-${action}`)\n}\n\nfunction removeActionClasses () {\n  const classList = document.documentElement.classList\n  classList.remove.apply(classList, ACTIONS.map(a => `turn-${a}`))\n}\n\nfunction create (Klass, action, direction) {\n  if (!Klass.supported || document.body.dataset.turn === 'false') {\n    Klass = NullTurn\n  }\n  const options = JSON.parse(document.body.dataset.turnOptions || '{}')\n  return new Klass(action, direction, options)\n}\n"
  },
  {
    "path": "src/helpers.js",
    "content": "export function prefersReducedMotion () {\n  if (typeof window !== 'undefined') {\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')\n    return !mediaQuery || mediaQuery.matches\n  } else {\n    return true\n  }\n}\n\nexport function motionSafe () {\n  return !prefersReducedMotion()\n}\n\nexport function animationsEnd (selector) {\n  const elements = [...document.querySelectorAll(selector)]\n\n  return Promise.all(elements.map((element) => {\n    return new Promise((resolve) => {\n      function listener () {\n        element.removeEventListener('animationend', listener)\n        resolve()\n      }\n      element.addEventListener('animationend', listener)\n    })\n  }))\n}\n\nexport function pascalCase (string) {\n  return string.split(/[^\\w]/).map(capitalize).join('')\n}\n\nexport function camelCase (string) {\n  return string.split(/[^\\w]/).map(\n    (w, i) => i === 0 ? w.toLowerCase() : capitalize(w)\n  ).join('')\n}\n\nfunction capitalize (string) {\n  return string.replace(/^\\w/, (c) => c.toUpperCase())\n}\n"
  },
  {
    "path": "src/null-turn.js",
    "content": "export default class NullTurn {\n  static supported = true\n  direction = 'none'\n  exit () {}\n  async beforeEnter () {}\n  async enter () {}\n  complete () {}\n  abort () {}\n  finished = Promise.resolve()\n}\n"
  },
  {
    "path": "src/turn.js",
    "content": "import { motionSafe } from './helpers.js'\nimport Controller from './controller.js'\n\nconst Turn = {\n  start () {\n    if (!this.started && motionSafe()) {\n      for (const event in eventListeners) {\n        window.addEventListener(event, eventListeners[event])\n      }\n      this.controller = new Controller(Turn.config)\n      this.controller.start()\n      this.started = true\n    }\n  },\n\n  stop () {\n    if (this.started) {\n      for (const event in eventListeners) {\n        window.removeEventListener(event, eventListeners[event])\n      }\n      this.controller.stop()\n      this.started = false\n    }\n  },\n\n  config: {\n    experimental: {\n      viewTransitions: true\n    }\n  }\n}\n\nconst eventListeners = {\n  'turbo:click': function (event) {\n    this.controller.click(event)\n  }.bind(Turn),\n  'turbo:visit': function (event) {\n    this.controller.visit(event)\n  }.bind(Turn),\n  'turbo:submit-start': function (event) {\n    this.controller.submitStart(event)\n  }.bind(Turn),\n  'turbo:before-render': async function (event) {\n    this.controller.beforeRender(event)\n  }.bind(Turn),\n  'turbo:render': async function () {\n    this.controller.render()\n  }.bind(Turn),\n  'turbo:load': async function (event) {\n    this.controller.load(event)\n  }.bind(Turn),\n  popstate: function () {\n    this.controller.popstate()\n  }.bind(Turn)\n}\n\nexport default Turn\n"
  },
  {
    "path": "src/view-transition-turn.js",
    "content": "import BaseTurn from './base-turn.js'\n\nexport default class ViewTransitionTurn extends BaseTurn {\n  static supported = !!document.startViewTransition\n\n  prepare () {\n    this.snapshot = new Promise(resolve => { this.snapshat = resolve })\n    this.transition = document.startViewTransition(_ => this.render())\n    return this.snapshot\n  }\n\n  exit () {}\n\n  async beforeEnter (detail) {\n    this.addClasses('before-transition')\n    this.dispatch('before-transition', {\n      detail: { ...detail, action: this.action }\n    })\n    await this.prepare()\n  }\n\n  render () {\n    this.snapshat()\n    return new Promise(resolve => { this.rendered = resolve })\n  }\n\n  async enter () {\n    this.rendered()\n    this.removeClasses('before-transition')\n    this.addClasses('transition')\n    await this.finished\n    await Promise.resolve() // next tick\n    this.removeClasses('transition')\n  }\n\n  complete () {}\n\n  abort () {\n    this.removeClasses('transition')\n  }\n\n  rendered () {}\n\n  get finished () {\n    return this.transition?.finished\n  }\n}\n"
  },
  {
    "path": "turn.css",
    "content": "[data-turn-exit],\n[data-turn-enter] {\n  animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);\n  animation-fill-mode: forwards;\n}\n\nhtml.turn-advance.turn-exit [data-turn-exit] {\n  animation-name: fade-out-up;\n  animation-duration: .3s;\n}\n\nhtml.turn-advance.turn-enter [data-turn-enter] {\n  animation-name: fade-in-up;\n  animation-duration: .6s;\n}\n\nhtml.turn-advance.turn-before-transition [data-turn-exit],\nhtml.turn-advance.turn-transition [data-turn-exit] {\n  opacity: 0;\n}\n\nhtml.turn-before-exit [data-turn-exit],\nhtml.turn-exit [data-turn-exit] {\n  will-change: transform, opacity;\n}\n\n@keyframes fade-out-up {\n  0% {\n    opacity: 1;\n    transform: translateZ(0)\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -4rem, 0)\n  }\n}\n\n@keyframes fade-in-up {\n  0% {\n    opacity: 0;\n    transform: translate3d(0, 4rem, 0)\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateZ(0)\n  }\n}\n"
  }
]