From 3ae074ab038f53e00f3263982ef6e9a59d14ebbc Mon Sep 17 00:00:00 2001 From: MinamiFunakoshiTR Date: Mon, 12 Jan 2026 10:08:09 -0500 Subject: [PATCH] adds toggle scrub demo button --- .../HorizontalScroller/HorizontalScroller.mdx | 53 +++++++++++-------- .../HorizontalScroller.stories.svelte | 47 ++++++---------- .../HorizontalScroller.svelte | 2 +- .../HorizontalScroller/demo/Demo.svelte | 29 +++++++++- 4 files changed, 76 insertions(+), 55 deletions(-) diff --git a/src/components/HorizontalScroller/HorizontalScroller.mdx b/src/components/HorizontalScroller/HorizontalScroller.mdx index c29bbd3f..dbca1647 100644 --- a/src/components/HorizontalScroller/HorizontalScroller.mdx +++ b/src/components/HorizontalScroller/HorizontalScroller.mdx @@ -8,16 +8,17 @@ import IllustratorScreenshot from './assets/illustrator.png'; # HorizontalScroller -The `HorizontalScroller` component is helpful in making horizontal scrolling sections that respond to vertical scroll input. It is flexible in a way that it can horizontally scroll any children content wider than 100vw from one end to the other. +The `HorizontalScroller` component creates a horizontal scrolling section that scrolls through any child content wider than `100vw`. -To scroll any DOM layout wider than the viewport, wrap the content inside the `HorizontalScroller` component. The component will take care of the rest. +To use `HorizontalScroller`, wrap it around the content that you want to horizontally scroll through. The scroll length is controlled by the height of the `HorizontalScroller` container, which is set by the prop `height`. `height` defaults to `200lvh`, but you can adjust this to any valid CSS height value such as `1200px` or `400lvh`. -## Basic demo - -To use the `HorizontalScroller` component, import it and provide the children content to scroll. The scroll height defaults to `200lvh`, but you can adjust this to any valid CSS height value such as `1200px` or `200lvh` with the `height` prop. +The child content inside the `HorizontalScroller` must be wider than `100vw` so that there is overflow to horizontal scroll through. By default, only the top `100lvh` of the child content is visible. You can use CSS `transform: translate()` on the child content to adjust its vertical positioning within the visible area. > đź’ˇTIP: Use `lvh` or `svh` units instead of `vh` unit for the height, as [these units](https://www.w3.org/TR/css-values-4/#large-viewport-size) are more reliable on mobile or other devices where elements such as the address bar toggle between being shown and hidden. +Set the `showDebugInfo` prop to `true` to visualise the scroll progress and other useful information. + + [Demo](?path=/story/components-graphics-horizontalscroller--demo) ```svelte @@ -25,36 +26,46 @@ To use the `HorizontalScroller` component, import it and provide the children co import { HorizontalScroller } from '@reuters-graphics/graphics-components'; - - -
- - - alt text + + + +
+ alt text
``` -## With stops +## Controlling scroll with stops and easing -The `HorizontalScroller` also allows you to define a set of points to stop or slow down the scrolling at specific intervals using the `stops` prop. This is useful for creating step-based horizontal scrolling experiences. +The `HorizontalScroller` allows you to control the horizontal scroll experience using various props. -The `scrubbed` prop can be used to define whether the scrolling experience should be smooth or tied directly to the scroll position. Setting `scrubbed` to `true` will make the horizontal scroll position directly correspond to the vertical scroll position, while setting it to `false` will create a smooth scrolling effect. +**`stops`:** -If `scrubbed` is set to `false` and `stops` are defined, the scroller will transition smoothly to the next stop when the `Mapped Progress` reaches the midpoint between the two stops. The transition speed is controlled by the `duration` prop (in milliseconds) and the `easing` prop (which accepts any easing function from `svelte/easing` or a custom function based on signature `(t: number) => number`). +`stops` is an optional prop that accepts an array of numbers between `0` and `1` — which corresponds to the scroll `progress` — at which to stop or slow down the scrolling. This is useful for creating progress-based horizontal scrolling experiences. + +For example, as shown in the demo below, if you define `stops` as `[0.2, 0.5, 0.6, 0.7]`, the scrolling will pause or slow down at these `progress` values as the user scrolls through the `HorizontalScroller` section. + +**`scrubbed`, `duration`, and `easing`:** +The `scrubbed` prop controls whether the scrolling tied exactly to the scroll position (`scrubbed: true`) or is smoothed out (`scrubbed: false`). The prop defaults to `true`. + +If `scrubbed` is set to `false` and `stops` are defined, `HorizontalScroller` transitions smoothly between the stop values. + +when the `Mapped Progress` reaches the midpoint between the two stops. The transition speed is controlled by the `duration` prop (in milliseconds) and the `easing` prop (which accepts any easing function from `svelte/easing` or a custom function based on signature `(t: number) => number`). If `scrubbed` is set to `true` and `stops` are defined, all the stops are traversed at equal distance but based on the easing function provided. -Use `showDebugInfo` prop to visualize the scroll progress and other useful debug information. The `Progress` indicates the vertical progress with values in the range 0...1 indicating the content being locked or a user-fed value to control the horizontal scroll position. The `Mapped Progress` value indicates the vertical progress mapped to mappedStart and mappedEnd values. By default these are 0 and 1 respectively. Finally, the `Eased Progress` value indicates the horizontal scroll progress after applying stops and easing (if any). `Eased Progress` accurately reflects the transition of horizontal scroll position. -Feel free to toggle `scrubbed` prop here to see the difference. + + `Progress` indicates the scroll progress value between `0` and `1`. The `Mapped Progress` indicates the vertical progress mapped to `mappedStart` and `mappedEnd` values. By default these are 0 and 1 respectively. Finally, the `Eased Progress` value indicates the horizontal scroll progress after applying stops and easing (if any). `Eased Progress` accurately reflects the transition of horizontal scroll position. [Demo](?path=/story/components-graphics-horizontalscroller--demo) +[Demo](?path=/story/components-graphics-horizontalscroller--with-stops) + ```svelte - - {#snippet DemoSnippet()} @@ -32,36 +29,24 @@ {/snippet} - - {#snippet children(args)} - - {/snippet} + + + + - - {#snippet children(args)} - - - - {/snippet} + + + + + + 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 { diff --git a/src/components/HorizontalScroller/demo/Demo.svelte b/src/components/HorizontalScroller/demo/Demo.svelte index 5f0fd9d5..157c5d10 100644 --- a/src/components/HorizontalScroller/demo/Demo.svelte +++ b/src/components/HorizontalScroller/demo/Demo.svelte @@ -1,15 +1,40 @@ - +{#if args.toggleScrub} + + + +{/if} + + + +