Function buildAddGsapTweenSection

packages/sdk-playground/src/main.ts:779–809

()

}

function buildAddGsapTweenSection(): HTMLDivElement {
  const target = mkInput("target id", selectedId ?? "hf-badge");
  target.style.width = "110px";
  const dur = mkNumInput("dur", "0.8");
  const ease = mkInput("ease", "power2.out");
  ease.style.width = "110px";
  const propKey = mkInput("prop", "x");
  propKey.style.width = "60px";
  const propVal = mkInput("val", "200");
  propVal.style.width = "60px";
  tweenIdDisplay = document.createElement("div");
  tweenIdDisplay.id = "anim-id-display";
  tweenIdDisplay.textContent = lastTweenId || "no tween added yet";
  const add = mkBtn("Add →", "primary", () => {
    const tween: GsapTweenSpec = {
      method: "to",
      duration: numOr(dur.value, 0.5),
      ease: ease.value || "power2.out",
      properties: { [propKey.value.trim()]: coerceNum(propVal.value) },
    };
    lastTweenId = comp!.addGsapTween(target.value.trim(), tween);
    tweenIdDisplay.textContent = lastTweenId;
    logEntry("op", { addGsapTween: { target: target.value, tween, id: lastTweenId } });
  });
  return opSection(
    "addGsapTween",
    opRow(target, dur, ease),
    opRow(propKey, propVal, add),
    tweenIdDisplay,
  );
}

function needTween(): boolean {
  if (lastTweenId) return true;