fix(registry): position flowchart typing beats with label-relative offsets (#2549)

The flowchart and flowchart-vertical blocks read tl.labels["hold5"] back
from the timeline to schedule the "Pythom" -> "Python" typing correction.
The render compiler executes composition scripts under a GSAP proxy whose
timeline exposes no readable .labels map, so this line throws
("Composition script failed ... Cannot read properties of undefined
(reading 'hold5')") before window.__timelines is assigned. The block is
never registered: renders show only the dotted-grid background and every
render pays the 45s sub_timeline_readiness_timeout.

Use GSAP's own label-relative position syntax ("hold5+=<offset>") instead,
matching every other step in these files. Identical timing, no .labels read.

Verified with hyperframes@0.7.60 render: block was blank before, animates
after; the readiness timeout disappears.
This commit is contained in:
Paweł
2026-07-16 23:17:15 -04:00
committed by GitHub
parent 74b4f1e8c3
commit b44bc4ffaf
2 changed files with 16 additions and 12 deletions
+8 -6
View File
@@ -414,8 +414,10 @@
// 13. Hold
tl.addLabel("hold5", "+=0.2");
// 14. Type correction: "Pythom" → "Python"
const typingStart = tl.labels["hold5"];
// 14. Type correction: "Pythom" → "Python" — positioned relative to the "hold5"
// label. Reading tl.labels back is unavailable under the render compiler's GSAP
// proxy (it throws before the timeline is registered, leaving the block blank),
// so use GSAP's own label-relative position syntax instead.
const words = ["P", "Py", "Pyt", "Pyth", "Pytho", "Python"];
words.forEach((word, i) => {
tl.add(
@@ -423,18 +425,18 @@
if (pythonText)
pythonText.innerHTML = `Start with <span class="text-highlight">${word}</span>`;
},
typingStart + i * 0.05,
`hold5+=${i * 0.05}`,
);
});
const typingEnd = typingStart + words.length * 0.05;
const typingEnd = words.length * 0.05;
tl.add(() => {
if (pythonText) pythonText.innerHTML = "Start with Python";
gsap.set(S + " .squiggle-container", { opacity: 0 });
}, typingEnd);
}, `hold5+=${typingEnd}`);
// 15. Hold
tl.addLabel("hold6", typingEnd + 0.5);
tl.addLabel("hold6", `hold5+=${typingEnd + 0.5}`);
// 16. Cursor clicks away to deselect
tl.to(S + " #cursor", { x: -1050, y: -1520, duration: 0.3, overwrite: "auto" }, "hold6");