Vue3 Scrollama

A Vue 3 wrapper for Scrollama, a modern & lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.

Installation

npm install vue3-scrollama intersection-observer

Scrollama uses IntersectionObserver, we must manually add the polyfill for cross-browser support.

Usage

Import the component locally in your component:

import VueScrollama from "vue3-scrollama";

Basic Example

<template>
    <div>
        <VueScrollama
            :debug="false"
            :offset="0.55"
            @step-enter="({ element }) => (currStep = element.dataset.stepNo)"
            class="main__scrollama"
        >
            <div class="step" data-step-no="1">
                Step 1
            </div>
            <div class="step" data-step-no="2">
                Step 2
            </div>
           <div class="step" data-step-no="3">
                Step 3
            </div>
        </VueScrollama>
        <div>{{currStep}}</div>
    </div>
</template>

<script setup>
    import VueScrollama from 'vue3-scrollama'
    let currStep = ref(null);
</script>

Props

| Name | Type | Default | Description | | --- | --- | --- | --- | | debug | Bool | false | Displays a debug line that shows where Scrollama cursor is. | | offset | Float | 0 | Offsets the Scrollama step cursor by X. | | @step-enter | Event | - | Fires when entering the Scrollama component. | | @step-progress | Event | - | Fires every time you scroll within the Scrollama component. | | @step-exit | Event | - | Fires when you exit the Scrollama component. |

More Documentation Coming soon. Thank you for your patience.