StringProgressPart Module

Extract a slice of another progress timeline. StringProgressPart listens to a parent StringProgress element, remaps a sub-range (e.g. 0.2 → 0.6) into its own 0 → 1, and feeds that value into CSS and events.

Activation primer: Add string="progress-part" to every element you want StringProgressPart to drive. Supply string-id="your-id" when you need a stable handle for events, mirrors, or string-copy-from; otherwise StringTune generates one automatically.

HTML Attributes

Module Snapshot

• Activation attribute: string="progress-part"
• Input dependency: requires a sibling StringProgress with string-id matching the part-of identifier
• Range mapping: remaps the parent progress slice into a local 0→1, clamped to bounds
• CSS variable populated: --progress-slice
• Event channel: object:progress-slice:<id> → number
• Auto cleanup: detaches from the parent event bus when the element disconnects

Basic Usage

import StringTune, { StringProgress, StringProgressPart } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();
stringTune.use(StringProgress);
stringTune.use(StringProgressPart);
stringTune.start(60);

<section string="progress" string-id="story-progress" string-key="--story-progress" class="story">...</section>

<div string="progress-part" string-id="chapter-two" string-part-of="story-progress[0.35-0.6]" class="chapter">...</div>

.chapter {
  opacity: calc(clamp(0, 1, var(--progress-slice, 0)));
  transform: translateY(calc((1 - var(--progress-slice, 0)) * 20vh));
}

How It Works

• Part-of parsing: the module expects string-part-of in the format progressId[start-end]. A helper (parsePartOf) extracts the id and numeric bounds; invalid strings are ignored.
• Event subscription: subscribes to object:progress:<progressId> events emitted by StringProgress. As the parent progress changes, the part module receives the eased value.
• Remapping: using a linear remap, the parent progress between start and end is scaled into 0–1. Values outside the slice clamp to the nearest bound.
• CSS + events: writes the result into --progress-slice (unless disabled) and emits object:progress-slice:<id> with the same number, letting you orchestrate JavaScript timelines.
• Teardown: when the element disconnects, the module removes the event listener to avoid memory leaks.

Event Signal

stringTune.on('object:progress-slice:chapter-two', (slice) => {
  // slice is clamped 0..1 within the specified segment of the parent progress
});

StringProgressPart keeps long scroll stories modular—carve out the segments you need, bind them to CSS or JS, and let each section animate independently while sharing one master progress.