A Vue 3 wrapper for Scrollama
npm install vue3-scrollamaA Vue 3 wrapper for Scrollama, a modern & lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of
scroll events.
``sh`
npm install vue3-scrollama intersection-observer
Scrollama uses IntersectionObserver, we must manually add the polyfill for cross-browser support.
Import the component locally in your component:
`vue`
import VueScrollama from "vue3-scrollama";
vue
:debug="false"
:offset="0.55"
@step-enter="({ element }) => (currStep = element.dataset.stepNo)"
class="main__scrollama"
>
Step 1
Step 2
Step 3
{{currStep}}
``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. |