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.