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.

Public API

Attributes

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

• string="lerp"

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.