Page Transitions

Written by

in

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:

More posts