GSAP コードジェネレータ アニメーション
GSAP (GreenSock Animation Platform) の人気演出パターン20種類から選択して、JavaScriptコードを即生成。フェード・スライド・スタガー・モーフ・ScrollTrigger 等。プレビューで動作確認後、コードをコピーして自プロジェクトに貼り付け。
1.0 秒
0.0 秒
0.10 秒 (複数要素時)
1
2
3
4
使い方
- 下部の20種類の演出パターンからクリックで選択
- 上部で継続時間・遅延・イージング・スタガー (要素ごとの開始ずらし) を調整
- 「もう一度再生」ボタンでプレビュー確認 (プレビューは4つの要素で動作)
- コピーボタンでGSAPのJavaScriptコードを取得
GSAPの導入方法
生成したコードを使うには、GSAPライブラリをCDN等で読み込みます:
<!-- HTMLの </body> 直前に追加 --> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> <script> // ここに本ツールで生成したコードを貼り付け </script>
GSAP の特徴
- 業界標準: Apple/Google/Microsoft等のサイトでも採用される高品質アニメーションライブラリ
- パフォーマンス: CSS Animationより高速で滑らかな動き
- 豊富なAPI: gsap.to / gsap.from / gsap.fromTo / gsap.timeline / ScrollTrigger 等
- SVG・Canvas対応: DOM要素以外も自由にアニメーション可能
- 多くの場合無料: GreenSock standard ライセンスで個人・商用問わず無料 (一部Club GreenSock の有料プラグインあり)