# 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.