How to Customize

In the template, a component represents an exported ES6 class saved as a *.js file. You can find them in the following folders:

• 📁 HTML/js/components
• 📁 SOURCE/components (Gulp)

HTML Markup

Page components are placed inside the <main> content container. These are recognized by the [data-arts-component-name] attribute.

<main
  class="page-wrapper bg-gray-3"
  id="page-wrapper"
  data-barba="container"
  data-arts-color-theme="dark"
  >
  <div
    class="page-wrapper__content"
    id="page-wrapper__content"
    >
    <div
      class="js-my-custom-component"
      data-arts-component-name="MyCustomComponent"
      >
      ...
    </div>
  </div>
</main>

JS Markup

In the above HTML markup, the [data-arts-component-name] attribute has the value MyCustomComponent. This is also the name of our component file (with the *.js extension) and the exported class name.

• 📄 HTML/js/components/MyCustomComponent.js
• 📄 SOURCE/components/myCustomComponent/MyCustomComponent.js (Gulp)

export default class MyCustomComponent extends BaseComponent {
  ...
}

Options

Each component can have a custom set of options. This is defined in the class constructor as the defaults object.

export default class MyCustomComponent extends BaseComponent {
  constructor({
    name,
    loadInnerComponents,
    parent,
    element
  }) {
    super({
      name,
      loadInnerComponents,
      parent,
      element,
      // Component default options
      defaults: {
        myOption1: true,
        myOption2: 'stringValue',
        myAnotherOption: 55,
      },
    });
  }
}

Alternatively, the component default options can be overridden from the HTML markup using the [data-arts-component-options] attribute.

<div
  class="js-my-custom-component"
  data-arts-component-name="MyCustomComponent"
  data-arts-component-options="{}"
  >
  ...
</div>

In the following example, we've overridden the myOption2 and myAnotherOption key values while keeping myOption1 at its default value.

<div
  class="js-my-custom-component"
  data-arts-component-name="MyCustomComponent"
  data-arts-component-options="{myOption2: 'customValue', myAnotherOption: 12}"
  >
  ...
</div>

This is how we access the options object inside the component class:

export default class MyCustomComponent extends BaseComponent {
  constructor({
    name,
    loadInnerComponents,
    parent,
    element
  }) {
    super({
      name,
      loadInnerComponents,
      parent,
      element,
      // Component default options
      defaults: {
        myOption1: true,
        myOption2: 'stringValue',
        myAnotherOption: 55,
      },
    });

    // Setup the component and run the init() function
    this.setup();
  }

  init() {
    // Use "this.options" to get a parsed object of the component options
    console.log(`"myOption1 is": ${this.options.myOption1}`); // true (default value)
    console.log(`"myOption2 is": ${this.options.myOption2}`); // 'customValue' (overridden value)
    console.log(`"myAnotherOption is": ${this.options.myAnotherOption}`); // 12 (overridden value)
  }
}

Animations

Optionally, a component can have an animation scene that is triggered when the component element comes into the viewport on page scrolling. This is defined by the [data-arts-os-animation="true"] attribute in the HTML markup.

<div
  class="js-my-custom-component"
  data-arts-component-name="MyCustomComponent"
  data-arts-component-options="{myOption2: 'customValue', myAnotherOption: 12}"
  data-arts-os-animation="true"
  >
  ...
</div>

When the [data-arts-os-animation="true"] attribute is found, the template frontend will look for these two functions: prepareAnimation and getRevealAnimation. These are the places where you set and build your animation scene.

export default class MyCustomComponent extends BaseComponent {
  constructor({
    name,
    loadInnerComponents,
    parent,
    element
  }) {
    super({
      name,
      loadInnerComponents,
      parent,
      element,
      // Component default options
      defaults: {
        myOption1: true,
        myOption2: 'stringValue',
        myAnotherOption: 55,
      },
    });

    // Setup the component and run the init() function
    this.setup();
  }

  init() {

  }

  // Prepare your animation scene here (set initial values, positions, transforms, etc)
  prepareAnimation() {
    return new Promise((resolve) => {
      const tl = gsap.timeline({
        onComplete: () => resolve(true)
      });

      // Add "set" tweens to the timeline as needed
    });
  }

  // Put the actual on-scroll animation scene here
  getRevealAnimation() {
    const tl = gsap.timeline({
      paused: true
    });

    // Build the animation scene here

    return tl;
  }
}

Want to quickly turn off the on-scroll animation?

Simply remove the [data-arts-os-animation="true"] attribute in the HTML markup. You can still keep your prepareAnimation and getRevealAnimation functions in the component code.

Recognized Components

You can check out the list of available components in the template's main frontend file 📄 HTML/js/app.js.

window.app = {
  components: {
    'Preloader': {
      dependencies: [],
      file: './components/Preloader.js'
    },
    'Header': {
      dependencies: ['arts-header'],
      file: './components/Header.js'
    },
    'MenuOverlay': {
      dependencies: ['arts-infinite-list'],
      file: './components/MenuOverlay.js'
    },
    ...
    // Our component from the above examples
    'MyCustomComponent': {
      dependencies: [],
      file: './components/MyCustomComponent.js'
    }
  }
}

Loading Strategy

The component files are loaded on-demand using the dynamic import() (opens new window) function only whenever required. This speeds up the overall page loading and frontend performance. Also, it means that you don't have to handle the component loading manually. Just put the recognized component name in the [data-arts-component-name] attribute in your HTML markup.