vuelibs / vue-scrollama

Vue component to easily setup scroll-driven interactions (aka scrollytelling)

Vue Scrollama

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

• Live Demo

• CodeSandbox (Basic, Sticky Graphic 1, Sticky Graphic 2)

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.

• step-enter
• step-exit
• step-progress
• container-enter
• container-exit

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)
    }
  }
}

<style src="vue-scrollama/dist/vue-scrollama.css"></style>

<style>
/* your styles here */
</style>

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>