I wanted my portfolio to have meaningful, animated transitions between pages. It was built with the same SPA Library that I'm working on that the Pilates Studio einklang site uses, so most of the abstract work was already done and I could focus on the implementation.
The transitions are all made using CSS transitions and animations which are being triggered by custom attributes on the body tag. During a fade-out, the relevant body tag attributes usually look like this:
<body class=" is-transitioning (applies transition property styles (need to be applied before fade-out styles)) fade-out (applies fade-out styles) is-loading (added when the fade-out transition has finished but loading the data for the next page has not) " entrypointComponentID="post" (entrypoint component from which to fade-out) targetComponentID="index" (entrypoint component to transition to) >
After the fade-out transition, the targeted page is rendered to the DOM. Depending on the body's
targetComponentID attributes, it is styled to look exactly the way the first page looks like after the fade-out transition. From this middleground state, it immediately transitions to the regular styling.
The Technology stack is similar to the Pilates Studio einklang site. Node, Express and KeystoneJS for the backend, Handlebars for templating, SASS and Babel'd ES2015 for the frontend.
Since the site depends on CSS transitions and animations, browser support is ie10+ and all recent versions of remaining major browsers.
It was built in a week.