Animated page transitions

Proof of concept demo by @forresto

This demo shows a combination of "pjax" and "FLIP technique" for animation. The animation is driven by the Web Animations API.

• Pjax: loading html from other pages in the site, inserting the DOM into the current page, and updating the url with history.pushState
• FLIP technique for animation: transitioning elements by measuring their first position, last position, then inverting the change, then playing the animation

Original inspiration from Sarah Drasner: Native-Like Animations for Page Transitions on the Web.

TODO: [ ] fix transitions with history

Made during Webflow Maker Day 2020-06-26.