vue3-scrollama

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

More Documentation Coming soon. Thank you for your patience.