portal-flip-demo

This demo demonstrates how Portals can enable a seamless user experience among first party pages with flip animation.

Runnig the demo

1. Run the app

$ git clone --depth 1 https://github.com/uskay/portal-flip-demo.git
$ cd portal-flip-demo
$ npm install
$ npm run demo

2. Play around with it ;-)

• Access http://localhost:8080/fuji.html
• Click on the top half of the page to move to the previous page
• Click on the bottom half of the page to move to the next page

Explainer

• js/portals-controller.js dynamically adds 6 flip panels
• The upper fold (
  • front: fetching current page && adding the top half of the cloned page as a Shadow DOM
  • back: prev page Portal's top half
• The lower fold
  • front: fetching current page && adding the bottom half of the cloned page as a Shadow DOM
  • back: prev page Portal's bottom half)
• Portals (Next Portal and Prev Portal. Dynamically hide/show with user interaction)

Nice to have

• Add Service Worker to prefetch and cache the pages
• Use adoptPredecessor for the prev Portal (The demo is not using the predecessor HTMLPortalElement as is)

Disclaimer

The code base is built for demo purpose only (non production ready code). The demo is using Web Components (Shadow DOM v1) and written in ES6 syntax. To make the demo simple, it is not transpiling to ES5 and also not adding any polyfills. If you access the demo with a browser that does not support Portals, it will simply show the page without any transition effect (and the UI could break).

License

https://github.com/WICG/portals/blob/master/LICENSE.md