Auto Scroll Next

Customization	Reference
Edit options in	📄 HTML/js/app.js
Options object	🔧 app.options.autoScrollNext
Component source	📄 HTML/js/components/autoScrollNext.js
Component source (Gulp)	📄 SOURCE/components/autoScrollNext/AutoScrollNext.js

Default Options

window.app = {
  options: {
    // other options...
    autoScrollNext: {
      webGL: {
        enabled: false,
        vertices: 16,
      },
      onSceneProgress: {
        speed: 8,
        amplitude: 4,
        segments: 4,
        scalePlane: 1.1,
        scaleTexture: 1,
      },
      onSceneIdle: {
        speed: 4,
        amplitude: 2,
        segments: 4,
        scalePlane: 1,
        scaleTexture: 1.2,
      },
      scrollingClass: 'auto-scroll-next_scrolling',
      completeClass: 'auto-scroll-next_complete',
      toggleHeaderVisibility: true
    }
    // other options...
  }
}

HTML Markup

The options above are common for all bottom auto-navigation components created in the template. For HTML markup, please refer to the Auto Scroll Next component.

Customization

1. Enabling Header Visibility on Scene Progress

Set the toggleHeaderVisibility key to false if you'd like the page header not to be temporarily hidden during the animation scene.

autoScrollNext: {
  webGL: {
    enabled: false,
    vertices: 16,
  },
  onSceneProgress: {
    speed: 8,
    amplitude: 4,
    segments: 4,
    scalePlane: 1.1,
    scaleTexture: 1,
  },
  onSceneIdle: {
    speed: 4,
    amplitude: 2,
    segments: 4,
    scalePlane: 1,
    scaleTexture: 1.2,
  },
  scrollingClass: 'auto-scroll-next_scrolling',
  completeClass: 'auto-scroll-next_complete',
  toggleHeaderVisibility: false
}

2. Adjusting Image Scaling Level on Scene Progress

You can set different multipliers for the outer and inner image containers to achieve a different look and feel of the bottom navigation. The onSceneIdle object holds the initial values while onSceneProgress holds the final values. The intermediate values are calculated automatically based on the current scene progress.

autoScrollNext: {
  webGL: {
    enabled: false,
    vertices: 16,
  },
  onSceneProgress: {
    speed: 8,
    amplitude: 4,
    segments: 4,
    scalePlane: 1.1,
    scaleTexture: 1,
  },
  onSceneIdle: {
    speed: 4,
    amplitude: 2,
    segments: 4,
    scalePlane: 1,
    scaleTexture: 1.2,
  },
  scrollingClass: 'auto-scroll-next_scrolling',
  completeClass: 'auto-scroll-next_complete',
  toggleHeaderVisibility: true
}