gsap-animations
アクセシビリティに配慮した滑らかなGSAPアニメーションを作成
Webアニメーションはアクセシビリティテストに失敗したり、パフォーマンスを損なったりすることがよくあります。このスキルは、ユーザーの設定を尊重し、60fpsを維持する本番対応のGSAPパターンを提供します。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "gsap-animations". Create a hero section animation with background scale, title fade, and subtitle slide
Résultat attendu:
- タイムラインベースのアニメーションシーケンスを作成
- GPUアクセラレーション対応のプロパティ（scale、opacity、y）を使用
- reduced motionのアクセシビリティチェックを含む
- SPAナビゲーション向けのクリーンアップ関数を提供
- 60fpsに最適化されたアニメーション時間
Utilisation de "gsap-animations". Add scroll-triggered cards that fade in one by one
Résultat attendu:
- カードのスタッガーアニメーションを設定
- ScrollTriggerをビューポートの75%で開始するよう設定
- 複数カード向けにバッチ処理を有効化
- コンポーネントのアンマウント用クリーンアップ関数を提供
Audit de sécurité
SûrThis is a documentation-only skill containing GSAP animation best practices. No executable code, network calls, or file system access. Pure educational content with code examples for implementing animations safely. All 103 static findings are false positives - the scanner incorrectly flagged markdown code formatting backticks as shell execution and legitimate CDN URLs as hardcoded endpoints.
Facteurs de risque
🌐 Accès réseau (12)
⚙️ Commandes externes (65)
Score de qualité
Ce que vous pouvez construire
テーマにスクロールアニメーションを追加
適切なスクリプトのenqueueとアクセシビリティを考慮し、WordPressテーマに高性能なフェードインとパララックス効果を実装します。
既存のGSAPアニメーションを最適化
GPUアクセラレーション対応のプロパティのみを使うようにアニメーションをリファクタリングし、アクセシビリティ向上のためにreduced motion対応を追加します。
アニメーション付きサイトを一貫してテスト
提供されたテストヘルパーを使い、アニメーション完了時のスクリーンショットを取得してビジュアルリグレッションテストを行います。
Essayez ces prompts
Create a GSAP fade-in animation for elements with class 'fade-in' that triggers when they enter the viewport. Include accessibility support for reduced motion.
Show me how to create a subtle parallax effect on images that moves them 20% slower than scroll. Make it performant and mobile-friendly.
Provide the complete WordPress PHP code to properly enqueue GSAP and ScrollTrigger from CDN with theme animations file.
Analyze this GSAP animation code and identify any performance issues or properties that might cause layout thrashing: [paste code]
Bonnes pratiques
- アニメーションの前に必ずprefers-reduced-motionを確認し、代替手段を提供する
- レイアウトプロパティ（width、height、top、left）ではなく、transformプロパティ（x、y、scale、rotation）を使用する
- ブラウザのDevToolsだけでなく、実機のモバイル端末でアニメーションをテストする
Éviter
- レイアウト再計算を引き起こすwidth、height、positionプロパティのアニメーション
- 本番コードでmarkers: trueを使用すること - デバッグ用マーカーは必ず削除する
- シングルページアプリケーションでクリーンアップ関数なしにアニメーションを作成する