Infinite List

Customization	Reference
HTML selector	🔧 [data-arts-component-name="InfiniteList"]
Component source	📄 HTML/js/components/InfiniteList.js
Component source (gulp)	📄 SOURCE/components/infiniteList/InfiniteList.js

Default Options

defaults: {
  webGL: {
    enabled: false,
    watchScroll: 'auto',
    vertices: 16,
    elasticEffect: 2,
    perspectiveEffect: false,
    directionAwareEffect: false,
    dragScalePlanes: 0.95,
    dragScaleTextures: 1.05
  },
  preventScroll: false,
  autoplay: false,
  drag: {
    label: false,
    arrowsDistance: 45,
    scale: 1.2,
    hideNative: false,
    toggleClass: 'infinite-list_mouse-drag'
  },
  direction: 'vertical',
  loop: true,
  autoCenterFirstItem: true,
  marquee: false,
  matchMedia: false,
  onScrollRotatingButtonSpeed: 2,
  scroll: app.options.virtualScroll,
  scrollHeadings: {
    easing: {
      mouse: 0.1,
      touch: 0.1
    },
    speed: {
      mouse: 0.2,
      touch: 3
    },
    maxDelta: {
      mouse: 80,
      touch: 180
    },
  },
  type: 'wheel,touch,pointer',
  toggleScrollingClass: 'infinite-list_scrolling',
  toggleDraggingClass: 'infinite-list_dragging',
  togglePressedClass: 'infinite-list_pressed',
  snapOnRelease: {
    keyboard: true,
    toggleActiveItemClass: 'active',
    removeActiveClassOnInteraction: false
  },
  snapReveal: true,
  hoverReveal: false,
  hoverSyncLanes: false,
  wheelSpeed: -1,
  speedEffect: {
    skew: -0.1,
    scale: -0.1
  },
  opacityEffect: {
    from: 0,
    to: 1
  },
  speedEffectHeadings: {
    skew: -0.1,
    scale: -0.1
  },
  opacityEffectHeadings: {
    from: 0,
    to: 1
  },
  progressEffect: false,
  currentClass: 'current',
  itemIdAttribute: 'data-post-id',
  arrowPrevSelector: '.js-infinite-list__arrow-prev',
  arrowNextSelector: '.js-infinite-list__arrow-next'
}

HTML Markup

<div class="js-infinite-list has-curtains"
  data-arts-component-name="InfiniteList"
  data-arts-component-options="{}"
  data-arts-os-animation="true"
  >
  <!-- <canvas> element for webGL effects will be placed here -->
  <div class="canvas-wrapper"></div>
  ...
</div>