Transitions

Transitions are one of the key part of Highway and they can be created by extending Highway.Transition.
The documentation uses Highway to showcase its capabilities and a simple fade transition to have a nice and smooth transition between pages. Read more of the documentation about transitions.

Default Transition

// File: fade.js
// Import Highway
import Highway from '@dogstudio/highway';

// GSAP Library
import Tween from 'gsap';

// Fade
class Fade extends Highway.Transition {
  in({ from, to, done }) {
    // Reset Scroll
    window.scrollTo(0, 0);

    // Remove Old View
    from.remove();

    // Animation
    Tween.fromTo(to, 0.5,
      { opacity: 0 },
      {
        opacity: 1,
        onComplete: done
      }
    );
  }

  out({ from, done }) {
    // Animation
    Tween.fromTo(from, 0.5,
      { opacity: 1 },
      {
        opacity: 0,
        onComplete: done
      }
    );
  }
}

export default Fade;

// File: main.js
// Import Highway
import Highway from '@dogstudio/highway';

// Import Transitions
import Fade from 'path/to/fade.js';

// Call Highway.Core once.
const H = new Highway.Core({
  transitions: {
    default: Fade
  }
});

Try me

Contextual Transition

Since the documentation uses Highway it has access to all features available including contextual transitions which are specific transitions attached to links to override the transition related to the page depending on the context the link is. Read more of the documentation about contextual transitions.

<!-- File: index.html -->
<a href="path/to/page" data-transition="overlap"></a>

// File: overlap.js
// Highway
import Highway from 'highway';

// GSAP
import Tween from 'gsap';

// Fade
class Overlap extends Highway.Transition {
  in({ from, to, done }) {
    // Reset Scroll
    window.scrollTo(0, 0);

    // Animation
    Tween.fromTo(to, 0.5,
      { opacity: 0 },
      {
        opacity: 1,
        onComplete: done
      }
    );

    // Animation
    Tween.fromTo(from, 0.5,
      { opacity: 1 },
      {
        opacity: 0,
        onComplete: () => {
          // Set New View in DOM Stream
          to.style.position = 'static';

          // Remove Old View
          from.remove();
        }
      }
    );
  }

  out({ done }) {
    done();
  }
}

export default Overlap;

// File: main.js
// Import Highway
import Highway from '@dogstudio/highway';

// Import Transitions
import Fade from 'path/to/fade.js';
import Overlap from 'path/to/overlap.js';

// Call Highway.Core once.
const H = new Highway.Core({
  transitions: {
    default: Fade,
    contextual: {
      overlap: Overlap
    }
  }
});

Try me