Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

gsap_tween_tail counts GSAP's force3D and autoRound flags as properties

オープン 初心者向け
  • 何か問題がありますか？
#5,683 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@rudycelekli がすでに取り組んでいます。

2026年10月16日 から。

  • #5711 @rudycelekli による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
cli, typescript
領域
cli

調査の方向性

この警告は packages/cli/src/utils/gsapTweenTails.ts から発生しています。NOT_PROPERTIES リスト（77〜113行目付近）には force3D と autoRound が含まれておらず、plainProperties（133行目付近）はそれらを保持しています。両方のキーをリストに追加し、そのあと issue の再現手順で gsap_tween_tail が出力されなくなったことを確認してください。一方で、opacity の tween を2つ重ねるような実際に共有されるプロパティでは、引き続き出力されることも確認します。再現手順がクリーンで、既存の tween-tail テストがすべて通れば完了です。

索引モデルが issue の本文から書いたものです。

説明

bug triage/needs-triage
Describe the bug

check's runtime warning gsap_tween_tail treats GSAP's force3D and autoRound flags as tweened properties.

collectTweenRecords leaves out GSAP's special keys (NOT_PROPERTIES: duration, ease, overwrite, immediateRender, ...) but not force3D or autoRound. So tailBetween finds a shared "property" in any two overlapping tweens of one element that both pass them, whatever they animate, whenever the earlier one ends up to 0.25 s after the later one.

A composition that passes force3D: false, autoRound: false on every tween (ours does, for crisp scaled text) gets a warning for every such pair: about 60 on a 65 s composition, every one naming only force3D, autoRound, none a real property.

That hides the case the warning is for. We had two genuine pairs (two tweens of opacity on one element at once), found by their frames once 0.8.158's seek drew them in another order, and they were lost among the flag-only warnings.

Measured on 0.8.158 (0.8.152 has the same list). The code is unchanged in v0.8.162: NOT_PROPERTIES has neither key (packages/cli/src/utils/gsapTweenTails.ts, lines 77-113), and plainProperties keeps every other key of vars (line 133).

Minimal reproduction
npx hyperframes init repro --non-interactive --example blank

Then replace repro/index.html with the file below. Only the <script> differs from the blank template: one element, two overlapping tweens of different properties (x, then opacity), both with force3D: false, autoRound: false. The earlier tween ends 0.1 s after the later one.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1920, height=1080" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        background: #0a0a0a;
      }
      #root {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Inter, ui-sans-serif, system-ui, sans-serif;
      }
      #title {
        color: #f4f4f5;
        font-size: 72px;
        font-weight: 600;
        letter-spacing: -0.03em;
      }
    </style>
  </head>
  <body>
    <div
      id="root"
      data-composition-id="main"
      data-start="0"
      data-duration="10"
      data-width="1920"
      data-height="1080"
    >
      <h1 id="title" class="clip" data-start="0" data-duration="10" data-track-index="0">Title</h1>
    </div>
    <script>
      const tl = gsap.timeline({ paused: true });
      // One element, two overlapping tweens of different properties (x, then opacity).
      // The earlier tween ends 0.1 s after the later one. Both pass force3D and autoRound.
      tl.to("#title", { x: 200, duration: 1, force3D: false, autoRound: false }, 0);
      tl.to("#title", { opacity: 0.5, duration: 0.4, force3D: false, autoRound: false }, 0.5);
      window.__timelines["main"] = tl;
      tl.seek(0);
    </script>
  </body>
</html>
Steps to reproduce
  1. Set up the reproduction above.
  2. In repro, run npx [email protected] check --json.
  3. Look at runtime.findings: one gsap_tween_tail warning naming force3D, autoRound.
  4. For comparison, remove , force3D: false, autoRound: false from both tweens and run the check again: runtime.findings is empty.
Expected behavior

No gsap_tween_tail warning. The two tweens share no tweened property (x and opacity). force3D and autoRound are GSAP flags, not properties a tween animates, so they should be left out as ease and overwrite are, and the warning should name only properties two tweens really share.

Actual behavior

check --json exits 0 with this runtime finding (other fields trimmed):

{
  "code": "gsap_tween_tail",
  "severity": "warning",
  "message": "In timeline \"main\", a tween on force3D, autoRound of #title ends at 1.000 s, 0.100 s after a later tween on force3D, autoRound ends at 0.900 s. For that tail the earlier tween takes force3D, autoRound back and leaves its own end value on screen, so the later tween's end never shows. End the earlier tween by 0.500 s, or add overwrite: \"auto\" to the later tween.",
  "sourceFile": "index.html",
  "time": 0.9
}

The same composition without the two flags has no runtime findings.

Environment
OS:          Windows 11 (build 26200)
Node.js:     v24.14.0
HyperFrames: 0.8.158 (0.8.152 has the same NOT_PROPERTIES; code unchanged at v0.8.162)
Chrome:      Chrome Headless Shell 152.0.7977.30
Additional context

Request: add force3D and autoRound to NOT_PROPERTIES (or leave out every GSAP flag that is not a tweened property), so the warning names only properties two tweens really share.

主要言語
TypeScript
スター
54.1k
フォーク
4.9k
平均マージ
8時間 33分
マージ済み PR（30日）
665

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

heygen-com/hyperframes のほかの issue

heygen-com/hyperframes の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。