Page Transitions

An opt-in setting to apply a transition on the page when links are clicked

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

  1. Load the initializer code in index.js
    • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.
      import './fade-page';
  2. Load the required CSS in components.scss
    • Declare the following import statement in scss/custom/components.scss:
      @import "components/optional/page-transitions";

Basic Usage

Add class fade-page to any link.

<a class="fade-page" href="another-page.html">Link to another page</a>

This will cause the page to transition and then redirect the browser to the desired location.