https://github.com/jsonkao/svelte-scrollama

Lol
https://github.com/jsonkao/svelte-scrollama

Last synced: about 1 year ago
JSON representation

Lol

• Host: GitHub
• URL: https://github.com/jsonkao/svelte-scrollama
• Owner: jsonkao
• Created: 2023-12-08T16:36:20.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-15T19:26:34.000Z (over 2 years ago)
• Last Synced: 2025-02-06T10:15:16.595Z (over 1 year ago)
• Language: Svelte
• Size: 5.86 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Continuing the [Scrollama](https://github.com/russellsamora/scrollama) [legacy](https://github.com/jsonkao/react-scrollama). An alternative to [svelte-scroller](https://github.com/sveltejs/svelte-scroller) that bypasses scroll event listeners and uses `position: sticky`.

## Usage

Import the `Stepper.svelte` component. Then, use like so:

```svelte

    {#each paragraphs as text, index}

        {text}

    {/each}

```

## Props

```js

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

```