Highway

Highway.js is a tool for creating AJAX navigations with animations on websites. Essentially, it fetches data from other pages and loads them into the current page, also making it possible to insert transitions.

⚡

Highway Docs

📢

For Highway support contact Armando (at@client.fi)

Installation

To install, use npm install @dogstudio/highway. Then simply import Highway into the main js file as follows:

import Highway from '@dogstudio/highway'

Inside the app.js file, create a function render() to run on page load. In modular js, this looks something like this:

class Index() {
	render() {
		const H = new Highway.Core({
			renderers: {
				default: hw-renderer,
			},
			transitions: {
				default: hw-transition,
			}
		})
	}
}

This class calls for two documents: hw-renderer and hw-transition. These files serve different purposes, and should be created and imported inside the js file.

HTML

Using Highway is simple, the wrapper will stay the same, while its views will be switched up. The name of the data-router-view can be changed if a website requires different renderers and transitions.

<main data-router-wrapper>
  <article data-router-view="default">
		// [...]
  </article>
</main>

Renderers

At its most basic, the default renderer file hw-renderer.js will look something like this:

import Highway from '@dogstudio/highway';

class CustomRenderer extends Highway.Renderer {
  onEnter() { [...] }
  onLeave() { [...] }
  onEnterCompleted() { [...] }
  onLeaveCompleted() { [...] }
}
export default CustomRenderer;

Within these curly brackets, functions can made to run when a link is clicked, and a new page is loading. This can be particularly useful, for instance, when updating menus.

Transitions

Transition files should not include functions, and instead focus on using the hooks and methods provided:

import Highway from '@dogstudio/highway';

class CustomTransition extends Highway.Transition {
  in({ from, to, trigger, done }) {
    // [...]
    done()
  }
  out({ from, trigger, done }) {
    // [...]
    done()
  }
}

export default CustomTransition;

Here, from is the current view, and to is the new one. The done method must be called once an animation is completed. For a simple fade out, the transition might look like this:

export default class Transition extends Highway.Transition {
  in({ from, to, trigger, done }) {
    gsap.fromTo(to, {autoAlpha:0}, {
        autoAlpha:0,
        onComplete: () => {
          done()
        }
     })
  }
  out({ from, trigger, done }) {
     gsap.fromTo(from, {autoAlpha:1}, {
        autoAlpha:0,
        duration:0.4,
        onComplete:()=>{
            window.scrollTo(0,0)
            document.body.scrollTo(0,0)
            from.remove();
            done()
        }
     })
   }
}

Highway JS (Archived)
Installation
HTML
Renderers
Transitions