StringAnchor Module

Control the transform-origin for animated elements directly from HTML. StringAnchor parses human-friendly anchor strings, translates them into CSS-friendly values, and keeps mirrors in sync.

Activation primer: Add string="anchor" to every element you want StringAnchor to control. 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="anchor"
• Value parser: splits string-anchor into X/Y tokens, runs each through originParser (top→0%, left→0%, center→50%)
• Application: writes style.transformOrigin = "x y" on the element and any connected mirrors (via string-copy-from)
• Fallbacks: uses global module setting anchor when no inline attribute provided
• Lifecycle: runs on initial connection and whenever the module reconnects in a dynamic layout

Basic Usage

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

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

<figure class="card" string="anchor" string-anchor="top center">
  <img src="/images/motion-card.webp" alt="Motion preview" />
</figure>

<figure class="card" string="anchor" string-anchor="30% 80%">
  <img src="/images/motion-card-2.webp" alt="Offset origin" />
</figure>

.card {
  transform: rotateX(calc(var(--tilt-x, 0) * 1deg)) rotateY(calc(var(--tilt-y, 0) * 1deg));
  transition: transform 200ms ease;
}

How It Works

• Attribute mapping: the module reads the string-anchor value (or falls back to settings) and converts each axis using OriginParserTool so you can use words, percentages, or random() syntax.
• Mirror support: if you declare string-copy-from, every mirrored element shares the same computed origin, keeping complex composites aligned.
• Transform-friendly: because it only touches transform-origin, you can layer this with modules such as StringImpulse, StringMagnetic, or custom GSAP timelines without conflict.
• Idempotent: applies once on connect; update the attribute and call stringTune.onResize(true) if you need to recompute during runtime.

Event Hooks

StringAnchor relies on core lifecycle events and does not emit custom channels. Leverage standard object:connected tooling if you need to observe when origins update.

Let StringAnchor set the pivot for your transformations—declare the origin in HTML, and every animation module downstream respects that geometry.