StringLerp

StringLerp exposes the shared scroll lerp value from the active scroll controller. It does not compute element-specific geometry. Every connected object receives the same signed scroll delta while it is active.

Mode scope

StringLerp is scoped to smooth mode by default. On mobile — where the default scroll mode is default — objects with string="lerp" are automatically disconnected and produce no output.

To activate StringLerp in all scroll modes regardless of device, use the bracket override:

<div string="lerp[]" string-id="lerp-demo"></div>

To activate it only in specific modes:

<div string="lerp[smooth|default]" string-id="lerp-demo"></div>

See Scroll Modes for the full bracket syntax reference.

Public API

Attributes

StringLerp does not read any module-specific public attributes in the current runtime. Activation is only:

• string="lerp" (smooth mode only by default)
• string="lerp[]" (all modes)
• string="lerp[smooth|default]" (explicit mode list)

CSS Variables and DOM Output

The module writes:

• --lerp

The value is the current signed scroll lerp delta from the active scroll controller. It is not clamped to 0..1.

The module does not write transforms or classes by itself.

Events

Mirror Behavior

--lerp is written to the source element and to all mirrors linked through string-copy-from.

Quick Example

<div string="lerp" string-id="lerp-demo" class="lerp-demo">
  <div class="lerp-box"></div>
  <div class="lerp-label">Lerp <span id="lerp-value">0</span></div>
</div>

.lerp-demo {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 12px;
}

.lerp-box {
  width: 96px;
  height: 96px;
  border: 1px solid black;
  background: white;
  transform:
    translate3d(0, calc(var(--lerp, 0) * -6px), 0)
    rotate(calc(var(--lerp, 0) * 0.8deg));
}

Registration

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

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

Detailed Behavior

• On the first resize after objects connect, the module seeds --lerp with 0.
• While scrolling, it updates from data.scroll.lerped on every frame.
• On scroll stop, it resets the public value back to 0.