クリックでレイヤーを選択 ・ Shift＋クリックで複数選択
レイヤー
左右キーで移動、Alt＋左右キーで長さを変更、Deleteで削除
使い方
- SVGを読み込む右上のボタンから .svg ファイルを選ぶか、コードを貼り付けます。ファイルを画面にドロップしても読み込めます。Illustrator や Figma の書き出しもそのまま使えます。
- レイヤーを選ぶキャンバスの図形か、タイムラインの行をクリックします。Shift＋クリックで複数選べます。
- アニメーションを追加右の「アニメーションを追加」から選ぶと、再生位置（緑の線）から始まるバーが追加されます。「登場・強調・退場・線・変化」の5種類、30種類以上の動きがあります。複数選んでいるときは 0.1 秒ずつずらして追加します。
- タイミングを調整バーをドラッグして開始を、端をドラッグして長さを変えます。ほかのバーの端や再生位置にぴたっと揃います。細かい数値は右のプロパティで入力できます。グループを選んだときは「順番に」で、中の要素を1つずつずらして動かせます（文字を1文字ずつ出すときなど）。
- コードを書き出す「コードを書き出す」から GSAP のコードをコピーして、自分のページに貼り付けます。HTMLファイルとして保存もできます。
ショートカット
- Space 再生 / 一時停止
- ⌘Z / Ctrl+Z 元に戻す
- ⇧⌘Z / Ctrl+Y やり直す
- Delete 選んだアニメーションを削除
- ⌘D / Ctrl+D 複製
- ←→ バーを 0.05 秒ずつ移動（Shift で 0.5 秒、Alt で長さを変更）
- Esc 選択を解除
※ 線の描画・形の変形・パスに沿った移動には、GSAP の無料プラグイン（DrawSVG・MorphSVG・MotionPath）を使います。書き出したコードには、必要な読み込みタグが自動で入ります。