StringGlide Module

Translate scroll energy into layered drift. StringGlide accumulates scroll velocity, eases it into displacement, and writes the result to both CSS (--glide) and transforms for each decorated element.

Activation primer: Add string="glide" to every element you want StringGlide to animate. 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="glide"
• CSS variable populated: --glide (signed float, shared across mirrors)
• Inline transform: translate3d(0, glideValue px, 0) applied directly to the element on desktop
• Event channel: object:glide:<id> → number (current pixel offset)
• Viewport scaling: default travel capped at ~10% of viewport height; recalculated on resize
• Mobile fallback: below 1080px width the effect is disabled, elements reset to rest state

Basic Usage

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

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

<section class="hero-layers">
  <div string="glide" string-id="cloud-back" string-glide="0.25" class="cloud back"></div>
  <div string="glide" string-id="cloud-front" string-glide="0.6" class="cloud front"></div>
</section>

.cloud {
  will-change: transform;
  transition: transform 120ms ease-out;
}

.cloud::after {
  content: '';
  inset: 0;
  position: absolute;
  filter: blur(calc(abs(var(--glide, 0)) * 8px));
}

How It Works

• Velocity sampling: every frame the module inspects scroll.lerped (smoothed velocity). Direction changes adjust an internal velocityMultiplier, giving the first movement a stronger push and then tapering rebounds.
• Displacement integrator: two accumulators—acceleration (capped at 1) and displacement (bounded 0.01–1)—scale the velocity, producing a damped travel value in data.scroll.displacement held within -1 and 1.
• Pixel conversion: the displacement is multiplied by maxDisplacementValue (10% of viewport height) and by each element’s string-glide multiplier to obtain the per-element pixel offset.
• DOM updates: desktop mode applies translate3d immediately and sets --glide for the element plus any mirrors (string-copy-from). On scroll stop the module zeroes the transform and the CSS variable.
• Resize & mobile: when window width drops below 1080px, the module resets its state, clears transforms, and stops updating until the layout widens again.

Event Signal

stringTune.on('object:glide:cloud-front', (offset) => {
  frontCloudMaterial.uniforms.scrollDrift.value = offset / 200;
});

StringGlide adds inertia to your scroll storytelling—pair it with parallax or velocity-driven effects to keep layers floating, easing in, and coming to rest exactly when the gesture does.