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.