Vue3 Scrollama

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

Installation

``sh
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:

`vue
import VueScrollama from "vue3-scrollama";
`

Basic Example


`vue

`

`vue

`

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. |

$3