Svelte Scrollyteller

A scrollyteller component for Svelte. Svelte port of the ABC News React Scrollyteller.

Installation

npm install @abcnews/svelte-scrollyteller

Add aunty config to package.json:

"aunty": {
  "type": "svelte",
  "build": {
    "entry": [
      "index"
    ],
    "includedDependencies": [
      "@abcnews/svelte-scrollyteller"
    ]
  }
}

Usage

The scrollyteller takes a series of panels of content nodes and turns them into a series of elements which scroll over the <Scrollyteller> component's children.

The panels prop is in the format of:

[
  {
    data: {
      info: 'Some kind of config that is given when this marker is active'
    },
    nodes: [<DOM elements for this panel>]
  },
  {
    data: {
      thing: 'This will be given when the second marker is hit'
    },
    nodes: [<DOM elements for this panel>]
  }
]

When a new box comes into view onMarker will be called with the data of the incoming panel.

<script lang="ts">
    import Scrollyteller from '@abcnews/svelte-scrollyteller';
    import UpdatableGraphic from 'UpdatableGraphic.svelte';

    export let panels;

    let marker = 0;
    let progress;

    const markerChangeHandler = (data) => {
        marker = data;
    };

    const progressChangeHandler = (data) => {
        progress = data;
    };
</script>

<Scrollyteller {panels} onMarker="{markerChangeHandler}" onProgress="{progressChangeHandler}">
    <UpdatableGraphic marker="{marker}" />
</Scrollyteller>

For a more complete example using Typescript see the examples.

Props

Usage with Odyssey

When developing ABC News stories with Odyssey you can use the loadScrollyteller function to gather panels within a CoreMedia article.

See a more complete usage example with Odyssey.

CoreMedia text:

#scrollytellerVARIABLEvalue
This is the opening paragraph panel
#markVARIABLEvalue
This is a second panel
#markVARval
This is another paragraph
#endscrollyteller

JS Code:

import { loadScrollyteller } from '@abcnews/svelte-scrollyteller';
import App from 'App.svelte';

const scrollyData = loadScrollyteller(
    '', // If set to eg. "one" use #scrollytellerNAMEone in CoreMedia
    'u-full', // Class to apply to mount point u-full makes it full width in Odyssey
    'mark' // Name of marker in CoreMedia eg. for "point" use #point default: #mark
);

new App({
    target: scrollyData.mountNode,
    props: { panels: scrollyData.panels }
});

Development

This is packaged using SvelteKit.

Get started

git clone [email protected]:abcnews/svelte-scrollyteller.git
cd svelte-scrollyteller
npm i
npm run dev

This will get a SvelteKit app to use for development and testing up and running.

Releasing new versions

npm run release

This will:

• install dependences
• build
• test
• lint
• bump version
• commit
• publish to npm