StringGlide

StringGlide turns scroll energy into drift. Internally it accumulates motion from the shared scroll lerp state, then exposes that motion in two different forms:

• a shared normalized CSS variable
• a per-element pixel transform

Those two outputs are not the same number.

Public API

Attributes

CSS Variables and DOM Output

The module writes two different public outputs:

• --glide
• inline transform: translate3d(0, <value>px, 0)

Important distinction:

• --glide is the shared normalized displacement from data.scroll.displacement
• the inline transform is the per-element pixel offset after applying viewport scaling and string-glide

Events

Mirror Behavior

Mirrors receive:

• the shared --glide variable

Mirrors do not receive the inline transform in the current runtime. The transform is applied only to the source glide element.

Quick Example

<div class="glide-stage">
  <div string="glide" string-id="glide-card" string-glide="0.5" class="glide-card">
    Glide
  </div>
</div>

.glide-stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

.glide-card {
  width: 160px;
  height: 96px;
  display: grid;
  place-items: center;
  border: 1px solid black;
  background: white;
}

Registration

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

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

Detailed Behavior

• The module derives motion from data.scroll.lerped, then integrates that into data.scroll.displacement.
• The per-element transform is capped by an internal max displacement of about 10% of viewport height.
• On scroll stop, both the transform and --glide are reset to 0.
• On viewports <= 1024px, the module switches to a mobile branch and resets everything to rest.