Repository files navigation

A Vue component to easily setup scroll-driven interactions (aka scrollytelling). UsesScrollama under the hood.

The best way to understand what it can do for you is to check out the exampleshere andhere.

If you're upgrading from v1 to v2 (which you should), do check out therelease notes.

npm install vue-scrollama intersection-observer

Scrollama makes use ofIntersectionObserver and you'll want to manually add its polyfillintersection-observer for cross-browser support.

Any elements placed directly inside aScrollama 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 threshold
• step-exit: when the top or bottom edge of a step element exits the offset threshold
• step-progress: continually fires the progress (0-1) a step has made through the threshold

Here's a simple example with three<div> elements as steps and astep-enter event

<template>  <Scrollama@step-enter="stepEnterHandler">    <divclass="step-1"data-step="a">...</div> // classes like .step-1 may be used to adjust the style and dimensions of a step    <divclass="step-2"data-step="b">...</div> // data-* attributes can be helpful to store instructions to be used in handlers    <divclass="step-3"data-step="c">...</div>  </Scrollama></template><script>import'intersection-observer'// for cross-browser supportimportScrollamafrom'vue-scrollama'// local registration in this example, can also be globally registeredexportdefault {  components: {    Scrollama// local registration in this example, can also be globally registered  },  methods: {stepEnterHandler ({element, index, direction}) {// handle the step-event as required hereconsole.log({ element, index, direction });// use the data attributes if neededconsole.log(element.dataset.step)// a, b or c    }  }}</script>

Props passed to theScrollama component will simply be passed on to scrollama'ssetup method:

// example with offset prop set to 0.8<template>  <Scrollama@step-enter="stepHandler":offset="0.8">      ...  </Scrollama></template>

• step-enter
• step-exit
• step-progress

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

andmore.

Example repohere.

• Fixes buggy behaviour and improves performance on mobile devices
• Updated in accordance with the latestscrollama API
• Breaking: No moregraphic slot, create your graphic outside theScrollama component now and style it as per your needs (have a look at the examples above for guidance)
• DOM scaffolding generated byScrollama has been simplified
• No need to import CSS any more, the DOM scaffolding is just onediv and can be styled by adding classes or styles on theScrollama component