vue-scrollama
v2.0.6
Easy scroll driven interactions (aka scrollytelling) with Vue + Scrollama
0/weekUpdated 3 years agoMITUnpacked: 64.4 KB
Published by Vignesh Shenoy
npm install vue-scrollamaVue Scrollama
A Vue component to easily setup scroll-driven interactions (aka scrollytelling). Uses Scrollama under the hood.
The best way to understand what it can do for you is to check out the examples here and here.
Update
Recommended updating to v2.0.0 or later, a few previous versions were reported to have unreliable event triggering on mobile devices. Release notes here.
Installation
``sh`
npm install vue-scrollama intersection-observer
Scrollama makes use of IntersectionObserver and you'll want to manually add its polyfill for cross-browser support.
Basic Usage
Any elements placed directly inside a Scrollama component will be considered as steps. As the user scrolls, events will be triggered and emitted which you can handle as required:
* step-enter: when the top or bottom edge of a step element enters the offset thresholdstep-exit
* : when the top or bottom edge of a step element exits the offset thresholdstep-progress
* : continually fires the progress (0-1) a step has made through the threshold
Here's a simple example with three
elements as steps and a step-enter event`vue
... // classes like .step-1 may be used to adjust the style and dimensions of a step
... // data-* attributes can be helpful to store instructions to be used in handlers
...
`Scrollama Options
Props passed to the
component will be passed on to scrollama's setup method:`vue
// example with offset set to 0.8
...
`Examples
$3
Note: The triggering might not work precisely in the split window browser in CodeSandbox. Open in a new window for more precise triggering.
* Basic
* Progress
* Sticky Graphic 1
* Sticky Graphic 2
and more.
$3
Example repo here.
Release Notes
$3
* Updated in accordance with the latest
API
Breaking*: No more graphic slot, create your graphic outside the Scrollama component now and style it as per your needs (have a look at the examples above for guidance)
* DOM scaffolding generated by Scrollama has been simplified
* No need to import CSS any more, the DOM scaffolding is just one div and can be styled by adding classes or styles on the Scrollama` component* This update also fixes some buggy behaviour observed on mobile devices