Back when Flash was used to build rich, animated web sites, animated transitions were often used to enrich the user experience. Many Native mobile apps embrace UI animation and page transitions as integral parts of their user experiences. Thanks to HTML5, CSS3, and new JS technologies and libraries, complex UI animations and page transitions are now achievable on the web, and not just for single page websites and SPAs (Single Page Apps), but for small static sites as well.

Key Benefits:

• Visual (e.g. directional) cues to improve user experience when browsing/navigating through a site, providing a sense of location.
• Potential increased credibility via a “Wow!” factor

Key Issues & Concerns:

• Url changing & Browser History (preserving native browser behavior, such as the back button)
• Event handling
• State management
• Transitions
• Preloading/prefetching
• Caching

Key Concepts:

• MVC (e.g. the “Views”)
• State management, changes & error handling
  • animating?
  • loading?
  • changing content?
  • leaving?
  • entering?
  • rendering?
  • going to?
  • going from?

Tech Considerations (to look into):

Browser History API
https://developer.mozilla.org/en-US/docs/Web/API/History_API

• pushstate
• popstate

Tech solutions:

Swup
Github: https://github.com/gmrchk/swup
Demo: https://gmrchk.github.io/swup/
Instructions: https://www.cssscript.com/css-transitions-between-pages-swup/

Barba JS
Uses PJAX (aka push state ajax)
http://barbajs.org/
Demo: http://barbajs.org/demo/nextprev/index.html

SmoothState.js
https://github.com/miguel-perez/smoothState.js

Animsition
http://git.blivesta.com/animsition/

Sequence.js
https://www.sequencejs.com/

Animate Transitions
Github: https://github.com/Rapid-Application-Development-JS/AnimateTransition
Demo: https://www.cssscript.com/demo/javascript-library-for-css3-based-page-transitions-animate-transition/
Instructions: https://www.cssscript.com/javascript-library-for-css3-based-page-transitions-animate-transition/

Turbolinks
https://github.com/turbolinks/turbolinks

Highway
Site: https://dogstudio.github.io/highway/
Github: https://github.com/Dogstudio/highway

My Static Site Page Transition Tests

• Swup
  • Latest Stable Swup Test v0.2
    • Repo: https://github.com/kccnma/test-swup
    • GH Pages demo: https://kccnma.github.io/test-swup/
  • Older Tests:
    • Swup Test v0.1
• Barba
  • Latest Semi-stable Barba Test v.0.2
    • Repo: https://github.com/kccnma/test-barba
    • GH Pages demo: https://kccnma.github.io/test-barba/
  • Older Tests:
    • Barba Test 1
    • Barba Test 2
• React
  • React Test 1

Articles & Resources:

Readings & Tutorials:

• CSS-Tricks: Native-Like Animations for Page Transitions on the Web (using Vue) by Sarah Drasner
• Page Transitions for Everyone (using Swup) by Georgy Marchuk 
• CodyHouse: Animated Page Transitions
• Animated page transitions with React Router 4, React Transition Group and Animated by Martin Haagensli (2017)
  • Demo: http://animate.mhaagens.me/

Codepens:

• Line (Television) Style Page Transitions
• Wipe from Sidenav Animated Page Transition
• Morphing SVG Page Transition Loader
• Page Transition with Loader
• Wipe to Hide then Reveal
• 3D Cube Transition using Velocity.js