Continuing the Scrollama legacy. An alternative to svelte-scroller that bypasses scroll event listeners and uses position: sticky
.
Import the Stepper.svelte
component. Then, use like so:
<Stepper {onStepEnter} {onStepExit}>
{#each paragraphs as text, index}
<section data-index={index}>{text}</section>
{/each}
</Stepper>
export let query = 'section'; // The DOM nodes to look for inside the stepper
export let attribute = 'data-index'; // Hacky way to track the index. Should be improved
export let offset = 0.5; // Offset
export let onStepEnter = (i: number, direction: string) => {}; // Step enter callback
export let onStepExit = (i: number, direction: string) => {}; // Step exit callback
export let debug = false; // Whether to console.log step enters and exits