gsap
プロフェッショナルなGSAPアニメーションを動画用に作成
動画構成用にGSAPアニメーションを作成するには、精密なタイミングと決定論的実行が必要です。このスキルは包括的なGSAPドキュメントとHyperFrames用のドロップインエフェクトを提供し、複数のリソースを検索せずにスムーズでプロフェッショナルなアニメーションを作成できます。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「gsap」を使用しています。 .card要素をスタガーエフェクトでアニメーション化、各カード間の遅延は0.1秒、左からスライド进场
期待される結果:
gsap.from('.card', {
x: -50,
opacity: 0,
stagger: 0.1,
duration: 0.5,
ease: 'power2.out'
});
「gsap」を使用しています。 .logoが最初にフェードインし、次に.headlineがスライドアップし、headlineの完了後に.subtitleがフェードインするタイムラインを構築
期待される結果:
const tl = gsap.timeline();
tl.to('.logo', { opacity: 1, duration: 0.4 })
.to('.headline', { y: 0, opacity: 1, duration: 0.5 }, '<')
.to('.subtitle', { opacity: 1, duration: 0.4 }, '+=0.2');
「gsap」を使用しています。 'Welcome'를초당 12文字の速度でタイプし、カーソル '|'は通常と点滅状態を交互に点滅
期待される結果:
const text = 'Welcome';
const cps = 12;
tl.call(() => cursor.classList.replace('cursor-blink', 'cursor-solid'), [], t);
tl.to('#typed', { text: { value: text }, duration: text.length / cps, ease: 'none' }, t);
tl.call(() => cursor.classList.replace('cursor-solid', 'cursor-blink'), [], t + text.length / cps);
セキュリティ監査
低リスクStatic analysis flagged 171 potential issues, but evaluation determined all critical and high findings are false positives. The scanner misidentified HTML script tags as shell commands, FFT signal processing as weak cryptography, and generic variable names as credential access patterns. The Python audio extraction script uses subprocess to run ffmpeg for legitimate audio processing. No malicious behavior or user input injection vectors detected.
高リスクの問題 (2)
中リスクの問題 (1)
低リスクの問題 (2)
リスク要因
⚡ スクリプトを含む (1)
📁 ファイルシステムへのアクセス (1)
⚙️ 外部コマンド (1)
品質スコア
作れるもの
動画オーバーレイに入場アニメーションを追加
動画構成内のテキストオーバーレイやUI要素にフェードイン、スライド、スケールの入場アニメーションを作成します。
オーディオリアクティブビジュアライザーを構築
動画背景の音楽や音声に応答するキャンバスベースのオーディオビジュアライザーを作成します。
複雑なマルチステップアニメーションをシーケンス化
GSAPタイムライン、ラベル、位置パラメータを使用して精密なタイミング координатыを持つ複数のアニメーションを調整します。
これらのプロンプトを試す
GSAPを使用して#hero要素をフェードインし、100px上にスライドさせます。期間は0.6秒、イージングはpower2.out。
GSAPタイムラインを作成してください：1）.titleをフェードイン、2）.subtitleを0.2秒後にフェードイン、3）.buttonを0.5秒でスケールイン。位置パラメータを使用し、delayは使用しないでください。
#messageのタイプライターアニメーションを作成してください。1秒あたり10文字でカーソルを点滅させます。カーソルは無操作時に点滅する必要があります。
AUDIO_DATA.frames[0].bands配列を使用してバーでオーディオフレーム[FRAME]をレンダリングします。各バンドはキャンバス四角形に対応します。低域はスケール、高域は不透明度を駆動します。
ベストプラクティス
- GPUアクセラレーションのためにレイアウトプロパティの代わりにtransformプロパティ（x、y、scale、rotation）を使用
- 可読性のためにdelayでチェーンする代わりに、タイムラインコンストラクタにデフォルトを渡す
- プログラムで再生を制御する必要がある場合は、トゥイーンとタイム라인の戻り値を保存
回避
- transformで同じ効果を得られる場合はwidth、height、top、leftをアニメーションさせない
- delayでトゥイーンをチェーンする代わりに、位置パラメータを持つタイムラインがより適切にシーケンス化する場合
- DOMにまだ存在しない要素をターゲットにするトゥイーンを作成しない