Skip to content

Edits to documentation and demos #382

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SudevKiyadaTR merged 2 commits into from
Jan 13, 2026
Merged

Edits to documentation and demos #382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ae074a
adds toggle scrub demo button
MinamiFunakoshiTR Jan 12, 2026
0ab89de
edits demos, documentation
MinamiFunakoshiTR Jan 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
427 changes: 225 additions & 202 deletions src/components/HorizontalScroller/HorizontalScroller.mdx
View file
Open in desktop

Large diffs are not rendered by default.

101 changes: 28 additions & 73 deletions src/components/HorizontalScroller/HorizontalScroller.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<script module lang="ts">
import { defineMeta } from '@storybook/addon-svelte-csf';
import HorizontalScroller from './HorizontalScroller.svelte';
import { quartInOut } from 'svelte/easing';

import HorizontalScroller from './HorizontalScroller.svelte';
import DemoComponent from './demo/Demo.svelte';
import DemoSnippetBlock from './demo/DemoSnippet.svelte';
import CustomChildrenBlock from './demo/CustomChildrenSnippet.svelte';
import ScrollableGraphic from './demo/ScrollableGraphic.svelte';
import AdvancedScrollableGraphic from './demo/AdvancedScrollableGraphic.svelte';
import WithScrollerBaseComponent from './demo/withScrollerBase.svelte';
import Block from '../Block/Block.svelte';

const { Story } = defineMeta({
title: 'Components/Graphics/HorizontalScroller',
Expand All @@ -19,85 +19,40 @@
let width: number = $state(0);
</script>

<script>
</script>

<svelte:window bind:innerWidth={width} />

{#snippet DemoSnippet()}
<DemoSnippetBlock />
{/snippet}

{#snippet CustomChildrenSnippet()}
<CustomChildrenBlock />
{/snippet}

<Story
name="Demo"
args={{
children: DemoSnippet,
height: '200lvh',
}}
>
{#snippet children(args)}
<DemoComponent {...args}></DemoComponent>
{/snippet}
<Story name="Demo">
<DemoComponent>
<DemoSnippetBlock />
</DemoComponent>
</Story>

<Story
name="With stops"
args={{
children: DemoSnippet,
height: '200lvh',
stops: [0.2, 0.5, 0.6, 0.7],
duration: 400,
scrubbed: true,
easing: quartInOut,
showDebugInfo: true,
direction: 'left',
}}
>
{#snippet children(args)}
<Block width="fluid">
<DemoComponent {...args}></DemoComponent>
</Block>
{/snippet}
<Story name="With stops and easing" exportName="WithStops">
<DemoComponent
stops={[0.2, 0.5, 0.9]}
duration={400}
toggleScrub={true}
easing={quartInOut}
>
<DemoSnippetBlock />
</DemoComponent>
</Story>

<Story
name="Extended boundary"
args={{
children: DemoSnippet,
height: '200lvh',
mappedStart: -0.5,
mappedEnd: 1.5,
showDebugInfo: true,
scrubbed: true,
stops: [0, 1],
easing: quartInOut,
}}
>
{#snippet children(args)}
<DemoComponent {...args}></DemoComponent>
{/snippet}
<Story name="Extended boundaries">
<DemoComponent
mappedStart={-0.5}
mappedEnd={1.5}
easing={quartInOut}
stops={[0, 1]}
>
<DemoSnippetBlock />
</DemoComponent>
</Story>

<Story
name="Custom children"
args={{
children: CustomChildrenSnippet,
height: '200lvh',
stops: [0.5],
duration: 400,
scrubbed: false,
easing: quartInOut,
showDebugInfo: true,
direction: 'right',
}}
>
{#snippet children(args)}
<DemoComponent {...args}></DemoComponent>
{/snippet}
<Story name="Custom children">
<DemoComponent>
<CustomChildrenBlock />
</DemoComponent>
</Story>

<Story name="Scrollable ai2svelte">
Expand Down
5 changes: 3 additions & 2 deletions src/components/HorizontalScroller/HorizontalScroller.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<script lang="ts">
import { onMount, type Snippet } from 'svelte';
import { Tween } from 'svelte/motion';
import type { Action } from 'svelte/action';
import { clamp, map } from './utils/index';
import type { Action } from 'svelte/action';

import Debug from './Debug.svelte';

interface Props {
Expand Down Expand Up @@ -210,7 +211,7 @@

<div
{id}
class={`horizontal-scroller-container ${cls}`}
class="horizontal-scroller-container {cls}"
style="height: {height};"
bind:this={container}
bind:clientHeight={containerHeight}
Expand Down
Binary file added src/components/HorizontalScroller/assets/illustrator.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/components/HorizontalScroller/assets/illustrator.png
View file
Open in desktop
Binary file not shown.
53 changes: 28 additions & 25 deletions src/components/HorizontalScroller/demo/AdvancedScrollableGraphic.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<script lang="ts">
import Demo from './graphic/ai2svelte/demo.svelte';
import BodyText from '../../BodyText/BodyText.svelte';
import Block from '../../Block/Block.svelte';

import HorizontalScroller from '../HorizontalScroller.svelte';
import { map } from '../utils/index';
import { sineInOut } from 'svelte/easing';
Expand Down Expand Up @@ -57,32 +59,33 @@

<BodyText text={foobarText} />

<HorizontalScroller
height="800lvh"
direction="right"
bind:progress
easing={sineInOut}
showDebugInfo
>
<Demo
{onArtboardChange}
debugTaggedText
taggedText={{
htext: {
captions: {
caption1:
'<div class="scroller-caption"><strong>Destruction!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
caption2:
'<div class="scroller-caption"><strong>Destruction!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
caption3:
'<div class="scroller-caption"><strong>Destruction!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
caption4:
'<div class="scroller-caption"><strong>Destruction!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
<Block width="fluid">
<HorizontalScroller
height="800lvh"
bind:progress
easing={sineInOut}
showDebugInfo
>
<Demo
{onArtboardChange}
debugTaggedText
taggedText={{
htext: {
captions: {
caption1:
'<div class="scroller-caption"><strong>Caption 1!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
caption2:
'<div class="scroller-caption"><strong>Caption 2!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
caption3:
'<div class="scroller-caption"><strong>Caption 3!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
caption4:
'<div class="scroller-caption"><strong>Caption 4!</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
},
},
},
}}
/>
</HorizontalScroller>
}}
/>
</HorizontalScroller>
</Block>

<BodyText text={foobarText} />

Expand Down
31 changes: 29 additions & 2 deletions src/components/HorizontalScroller/demo/Demo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,42 @@
<script lang="ts">
import ScrollerHorizontal from '../HorizontalScroller.svelte';
import HorizontalScroller from '../HorizontalScroller.svelte';
import BodyText from '../../BodyText/BodyText.svelte';
import Block from '../../Block/Block.svelte';

let { ...args } = $props();

const foobarText: string =
'In the mystical land of Foobaristan, the legendary hero Foo set out on an epic quest to find his missing semicolon, only to discover that Bar had accidentally used it as a bookmark inside a JSON file. Naturally, the entire kingdom crashed immediately. As the villagers panicked, Foo and Bar tried to fix the situation by turning everything off and on again, but all that did was anger the ancient deity known as “The Build System,” which now demanded three sacrifices: a clean cache, a fresh node_modules folder, and someone’s weekend. And thus began the saga nobody asked for, yet every developer somehow relates to.';

// For the `scrubbed` demo
let scrubbed: boolean = $state(true);
</script>

<BodyText text={foobarText} />

<ScrollerHorizontal {...args} />
{#if args.toggleScrub}
<Block>
<button onclick={() => (scrubbed = !scrubbed)}>
Toggle scrubbed: {scrubbed}
</button>
</Block>
{/if}

<Block width="fluid">
<HorizontalScroller showDebugInfo={true} {...args} {scrubbed} />
</Block>

<BodyText text={foobarText} />

<style lang="scss">
button {
cursor: pointer;
font-family: 'Geist Mono', monospace;
margin-bottom: 10px;
display: block;
padding: 0.5rem 1rem;
background-color: #f0f0f0;
border: 2px solid #ccc;
border-radius: 4px;
}
</style>
15 changes: 6 additions & 9 deletions src/components/HorizontalScroller/demo/ScrollableGraphic.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import Demo from './graphic/ai2svelte/demo.svelte';
import BodyText from '../../BodyText/BodyText.svelte';
import Block from '../../Block/Block.svelte';
import HorizontalScroller from '../HorizontalScroller.svelte';
import { sineInOut } from 'svelte/easing';

Expand All @@ -10,15 +11,11 @@

<BodyText text={foobarText} />

<HorizontalScroller
height="800lvh"
direction="right"
easing={sineInOut}
showDebugInfo
>
<Demo />
</HorizontalScroller>

<Block width="fluid">
<HorizontalScroller height="800lvh" easing={sineInOut}>
<Demo />
</HorizontalScroller>
</Block>
<BodyText text={foobarText} />

<style lang="scss">
Expand Down
42 changes: 12 additions & 30 deletions src/components/HorizontalScroller/demo/withScrollerBase.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,31 @@
<script lang="ts">
import Demo from './graphic/ai2svelte/demo.svelte';
import BodyText from '../../BodyText/BodyText.svelte';
import Block from '../../Block/Block.svelte';
import HorizontalScroller from '../HorizontalScroller.svelte';
import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
import { circInOut } from 'svelte/easing';

const foobarText: string =
'In the mystical land of Foobaristan, the legendary hero Foo set out on an epic quest to find his missing semicolon, only to discover that Bar had accidentally used it as a bookmark inside a JSON file. Naturally, the entire kingdom crashed immediately. As the villagers panicked, Foo and Bar tried to fix the situation by turning everything off and on again, but all that did was anger the ancient deity known as “The Build System,” which now demanded three sacrifices: a clean cache, a fresh node_modules folder, and someone’s weekend. And thus began the saga nobody asked for, yet every developer somehow relates to.';

// Optional: Bind your own variables to use them in your code.
let count = $state(1);
let index = $state(0);
let offset = $state(0);
let progress = $state(0);
let top = $state(0);
let threshold = $state(0.5);
let bottom = $state(1);
</script>

<BodyText text={foobarText} />

<ScrollerBase
{top}
{threshold}
{bottom}
bind:count
bind:index
bind:offset
bind:progress
query="div.step-foreground-container"
>
<ScrollerBase bind:progress query="div.step-foreground-container">
{#snippet backgroundSnippet()}
<!-- Add custom background HTML or component -->
<HorizontalScroller
height="100lvh"
direction="right"
bind:progress
scrubbed
stops={[0.5]}
handleScroll={false}
easing={circInOut}
showDebugInfo
>
<Demo />
</HorizontalScroller>
<Block width="fluid">
<HorizontalScroller
bind:progress
height="100lvh"
handleScroll={false}
showDebugInfo
>
<Demo />
</HorizontalScroller>
</Block>
{/snippet}
{#snippet foregroundSnippet()}
<!-- Add custom foreground HTML or component -->
Expand Down