A scrollyteller component for Svelte. Svelte port of the ABC News React Scrollyteller.
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 'svelte-scrollyteller/Scrollyteller.svelte';
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.
Property | Type | Description | Default |
---|---|---|---|
panels | Refer to Usage | required Array of nodes and data which dictate the markers | |
onMarker | (marker) => void | required Function which fires when a marker intersects and returns that markers data | |
onProgress | (progress) => void | Function which fires when a on scroll and returns the scrollyteller progress | |
customPanel | Svelte Component | Component to replace the default panel component | Panel.svelte |
observerOptions | IntersectionObserverInit | Options for the intersection observer. Refer to the docs | {threshold: 0.5} |
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 'svelte-scrollyteller/utils';
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 }
});
This is packaged using SvelteKit.
git clone git@github.com: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.
npm run release
This will:
- install dependences
- build
- test
- lint
- bump version
- commit
- publish to npm