Easy scroll driven interactions with Vue + Scrollama

Vue Scrollama

A Vue component to easily setup scroll-driven interactions (aka scrollytelling). Uses Scrollama under the hood.

Installation

npm install vue-scrollama intersection-observer

Scrollama makes use of IntersectionObserver and you'll want to manually add its polyfill intersection-observer for cross-browser support.

Basic Usage

Any elements placed directly inside a Scrollama component will be considered as steps. As the user scrolls, step events will be triggered and emitted which you can handle as required.

Here's a simple example with three <div> elements as steps and a step-enter event

// classes are helpful to adjust the style and dimensions of a step
// data-* attributes are useful to store instructions to be used in handlers
<template>
  <Scrollama @step-enter="stepEnterHandler">
    <div class="step1" data-step="a">...</div>
    <div class="step2" data-step="b">...</div>
    <div class="step3" data-step="c">...</div>
  </Scrollama>
</template>

<script>
import 'intersection-observer' // for cross-browser support
import Scrollama from 'vue-scrollama'

export default {
  components: {
    Scrollama
  },
  methods: {
    stepEnterHandler ({element, index, direction}) {
      // handle the step-event as required here
      console.log(element, index, direction)
    }
  }
}

Sticky Graphic

To add a sticky graphic element to the mix (example), place it into a slot with name 'graphic'.

// classes are helpful to adjust the style and dimensions of the graphic
<template>
  <Scrollama @step-enter="stepEnterHandler">
    <div slot="graphic" class="graphic">...</div> 
    <div class="step1" data-step="a">...</div>
    <div class="step2" data-step="b">...</div>
    <div class="step3" data-step="c">...</div>
  </Scrollama>
</template>

Scrollama Options

Props passed to the Scrollama component will be passed on to scrollama's setup method as documented here.

offset
progress
threshold
order
once
debug

// example with offset option
<template>
  <Scrollama @step-enter="stepHandler" :offset="0.8">
      ...
  </Scrollama>
</template>

Multiple instances

If you have more than one Scrollama components rendered at a time, you will need to pass on id as a prop.

<template>
  <Scrollama @step-enter="stepHandler1" id="scrollama1">
      ...
  </Scrollama>
  <Scrollama @step-enter="stepHandler2" id="scrollama2">
      ...
  </Scrollama>
</template>