Supported by Webflow. Animate Anything - A wildly robust JavaScript animation library built for professionals.

You can fiddle with timelines, ScrollTrigger, and Draggable right in the browser.

公式の基本に沿って、タイムラインとかScrollTriggerをブラウザでそのまま試せる。

You can play with the demos directly in "GSAP Getting Started — Learn Tweens by Touching This Page".

「GSAP 入門 — このページで tween を触って覚える」のデモをいじりながら動かせるようにしてある。

You can tweak tweens, timelines, and ScrollTrigger live in the demo.

タイムラインとかScrollTriggerでハマりがちなところを直感で覚える用。

Embedded some live tween and ScrollTrigger playgrounds so I don't have to keep opening a fresh sandbox.

tweenの動きとかScrollTriggerをその場で触れるようにiframeを並べただけだけど、案外便利。

スクロールに合わせて画像がゆっくりと上下する「パララックス効果」を、GSAPとLenisを使って実装するコードをご紹介します。画面に入ってくる画像に奥行きのある動きを加えることで、ページ全体がぐっと印象的になります。 GSAPとは GSAP (GreenSock Animation Platform) は、JavaScriptで作られた高性能なアニメーションライブラリです。CSSでは表現しきれない複雑なタイムライン管理や、細かいイージング設定、スクロール連動のアニメーションなどを、少ないコードでスムーズに実現できます。 特に強力なのは「ScrollTrigger」というプラグインです。スクロール位置をトリガーにしてアニメーションの進行度を制御でき、「スクロールしている間だけ動画が再生される」ような表現が可能になります。今回のパララックスも、このScrollTriggerを使って実装しています。 parallaxとは パララックス (視差効果) とは、背景と前景のスクロール速度に差をつけることで、奥行きや立体感を演出する手法です。たとえば、ページ全体のスクロール速度に対して、画像だけを少し遅れたり早かったりする速度で動かすことで、「画像が浮かび上がっている」ような印象を与えます。 Webデザインでは、単なる画像表示に動きを加えることで、ユーザーの視線を自然に誘導したり、ファーストビュー以外のエリアにも高級感を持たせたりする効果があります。 このコードの特徴 スムーススクロールとGSAPが連携している このコードでは、スムーススクロールライブラリ「Lenis」を組み合わせています。Lenisは慣性を持った滑らかなスクロールを提供し、そのスクロール位置をGSAPのScrollTriggerにリアルタイムで渡しています。マウスホイールやタッチ操作の細かい動きまで、画像のパララックスに正確に反映されます。 ライブラリ 役割 GSAP アニメーション本体の制御 ScrollTrigger スクロール位置とアニメーションを連動 Lenis 慣性付きスムーススクロールの提供 GPUで処理される軽量なアニメーション 画像の動きは transform: translateY() に相当する yPercent で実現しています。レイアウトを変更しない transform プロパティのみを使用しているため、GPUで処理されやすく、再描画の負荷が小さくなります。複数の画像を並べても、比較的軽快に動作します。 画像のはみ出しを考慮した構造 画像には初期状態で scale(1.4) がかかっています。これは、パララックスで画像を上下に動かしたきに、コンテナから画像が切れてしまわないよう、「余白」を確保するためです。コンテナには overflow: hidden と padding-top: 80% (縦横比の設定) が指定されており、どのような画面サイズでも画像がきれいに収まります。 スクロール範囲全体で自然に動く scrub: true を指定することで、スクロール位置とアニメーションの進行が1対1で連動します。スクロールを止めれば画像も止まり、戻せば像も逆再生されるため、操作感に違和感がありません。 サンプル 実装コード HTML・CSS HTML・CSS JavaScript カスタマイズ例 パララックスの動き幅を変える yPercent の値が大きいほど、画像の移動量が増えます。控えめにしたい場合は数値を小さくしてください。 tl.fromTo(img, { yPercent: -10, ease: 'none' }, { yPercent: 10, ease: 'none' }); スクロールの滑らかさを変える Lenisの lerp 値は、0に近いほど素早く追従し、1に近いほどゆるやかになります。デフォルトは 0.07 ですが、もっとダイレクトなスクロール感にしたい場合は小さく、より重厚な動きにしたい場合は大きくてください。 const lenis = new Lenis({ lerp: 0.03 // より重厚で滑らか }); 画像の初期ズームを調整する scale(1.4) はパララックスの移動余白を確保するための値です。移動量を大きくした場合は、この値も大きくしないと画像の端が見えてしまいます。逆に、移動量が小さい場合は 1.2 程度に縮小できます。 section .img .img-container img { transform: translateX(-50%) scale(1.2); } スクロール開始位置と終了位置を調整する デフォルトでは、要素がビューポートに入ってから出るまでの間にアニメーションが完了します。開始タイミングを早めたり、終了を遅らせたりする場合は、start と end を指定します。 scrollTrigger: { trigger: container, scrub: true, start: "top bottom", // 要素の上端が画面下端に来たとき開始 end: "bottom top" // 要素の下端が画面上端に来たとき終了 } 横方向のパララックスに変更する 縦スクロールページで横に動かしたい場合は、yPercent を xPercent に置き換えます。 tl.fromTo(img, { xPercent: -10, ease: 'none' }, { xPercent: 10, ease: 'none' }); 動きを控えめにする (アクセシビリティ対応) OSの設定で「視覚効果を減らす」を有効にしているユーザーには、パララックスを無効にする配慮ができます。 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (!prefersReducedMotion) { // パララックスのアニメーション処理を実行 } 実装時の注意点 LenisとGSAPの連携を忘れない Lenisを導入するだけではScrollTriggerがスムーススクロールの位置を認識できません。必ず以下の3行を追加してください。 lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add((time)=>{ lenis.raf(time * 1000); }); gsap.ticker.lagSmoothing(0); これがないと、スクロールと画像の動きがずれたり、カクついたりする原因になります。 画像のアスペクト比に注意 .img-container の padding-top: 80% は、横100に対して縦80の比率を作っています。もっと横長にしたい場合は 60% 程度に、縦長にしたい場合は 120% などに調整してください。ただし、元画像の比率と大きく異なると、画像の切り取り位置が不自然になることがあります。 コンテナと画像の中央揃えを確認する 画像は left: 50% と translateX(-50%) で中央揃えにしています。パララックスで上下に動かしても、水平方向の中心は常に保たれるため、左右の余白が不均等になる心配はありません。 スマホでの動作を確認する モバイル端末では、GSAPとLenisの動作がPCと異なる場合があります。特にiOSの慣性スクロールとの兼ね合いで、予想と違う動きをすることがあるため、実機での確認をおすすめします。必要に応じて、モバイルでは scrub を無効にするなどの条件分岐を検討してください。 同じページに複数のパララックスを置く場合 .img-container ごとにScrollTriggerが生成されるため、1ページに多数設置すると、低スペックな端末では動きが重くなる可能性があります。5〜6カ所程度であれば問題ありませんが、それ以上並べる場合は、画面内に入った要素だけアニメーションを有効にするなどの最適化を検討してください。 クラス名の衝突に注意 .img や .img-container は汎用的な名前です。既存のテンプレートやCSSと競合する場合は、.parallax-img や .parallax-container など、より固有のクラス名に変更してください。 出典 Image parallax effect [GSAP]

スクロールに合わせて画像がゆっくりと上下する「パララックス効果」を、GSAPとLenisを使って実装するコードをご紹介します。画面に入ってくる画像に奥行きのある動きを加えることで、ページ全体がぐっと印象的になります。 GSAPとは GSAP (GreenSock Animation Platform) は、JavaScriptで作られた高性能なアニメーションライブラリです。CSSでは表現しきれない複雑なタイムライン管理や、細かいイージング設定、スクロール連動のアニメーションなどを、少ないコードでスムーズに実現できます。 特に強力なのは「ScrollTrigger」というプラグインです。スクロール位置をトリガーにしてアニメーションの進行度を制御でき、「スクロールしている間だけ動画が再生される」ような表現が可能になります。今回のパララックスも、このScrollTriggerを使って実装しています。 parallaxとは パララックス (視差効果) とは、背景と前景のスクロール速度に差をつけることで、奥行きや立体感を演出する手法です。たとえば、ページ全体のスクロール速度に対して、画像だけを少し遅れたり早かったりする速度で動かすことで、「画像が浮かび上がっている」ような印象を与えます。 Webデザインでは、単なる画像表示に動きを加えることで、ユーザーの視線を自然に誘導したり、ファーストビュー以外のエリアにも高級感を持たせたりする効果があります。 このコードの特徴 スムーススクロールとGSAPが連携している このコードでは、スムーススクロールライブラリ「Lenis」を組み合わせています。Lenisは慣性を持った滑らかなスクロールを提供し、そのスクロール位置をGSAPのScrollTriggerにリアルタイムで渡しています。マウスホイールやタッチ操作の細かい動きまで、画像のパララックスに正確に反映されます。 ライブラリ 役割 GSAP アニメーション本体の制御 ScrollTrigger スクロール位置とアニメーションを連動 Lenis 慣性付きスムーススクロールの提供 GPUで処理される軽量なアニメーション 画像の動きは transform: translateY() に相当する yPercent で実現しています。レイアウトを変更しない transform プロパティのみを使用しているため、GPUで処理されやすく、再描画の負荷が小さくなります。複数の画像を並べても、比較的軽快に動作します。 画像のはみ出しを考慮した構造 画像には初期状態で scale(1.4) がかかっています。これは、パララックスで画像を上下に動かしたきに、コンテナから画像が切れてしまわないよう、「余白」を確保するためです。コンテナには overflow: hidden と padding-top: 80% (縦横比の設定) が指定されており、どのような画面サイズでも画像がきれいに収まります。 スクロール範囲全体で自然に動く scrub: true を指定することで、スクロール位置とアニメーションの進行が1対1で連動します。スクロールを止めれば画像も止まり、戻せば像も逆再生されるため、操作感に違和感がありません。 サンプル 実装コード HTML・CSS HTML・CSS JavaScript カスタマイズ例 パララックスの動き幅を変える yPercent の値が大きいほど、画像の移動量が増えます。控えめにしたい場合は数値を小さくしてください。 tl.fromTo(img, { yPercent: -10, ease: 'none' }, { yPercent: 10, ease: 'none' }); スクロールの滑らかさを変える Lenisの lerp 値は、0に近いほど素早く追従し、1に近いほどゆるやかになります。デフォルトは 0.07 ですが、もっとダイレクトなスクロール感にしたい場合は小さく、より重厚な動きにしたい場合は大きくてください。 const lenis = new Lenis({ lerp: 0.03 // より重厚で滑らか }); 画像の初期ズームを調整する scale(1.4) はパララックスの移動余白を確保するための値です。移動量を大きくした場合は、この値も大きくしないと画像の端が見えてしまいます。逆に、移動量が小さい場合は 1.2 程度に縮小できます。 section .img .img-container img { transform: translateX(-50%) scale(1.2); } スクロール開始位置と終了位置を調整する デフォルトでは、要素がビューポートに入ってから出るまでの間にアニメーションが完了します。開始タイミングを早めたり、終了を遅らせたりする場合は、start と end を指定します。 scrollTrigger: { trigger: container, scrub: true, start: "top bottom", // 要素の上端が画面下端に来たとき開始 end: "bottom top" // 要素の下端が画面上端に来たとき終了 } 横方向のパララックスに変更する 縦スクロールページで横に動かしたい場合は、yPercent を xPercent に置き換えます。 tl.fromTo(img, { xPercent: -10, ease: 'none' }, { xPercent: 10, ease: 'none' }); 動きを控えめにする (アクセシビリティ対応) OSの設定で「視覚効果を減らす」を有効にしているユーザーには、パララックスを無効にする配慮ができます。 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (!prefersReducedMotion) { // パララックスのアニメーション処理を実行 } 実装時の注意点 LenisとGSAPの連携を忘れない Lenisを導入するだけではScrollTriggerがスムーススクロールの位置を認識できません。必ず以下の3行を追加してください。 lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add((time)=>{ lenis.raf(time * 1000); }); gsap.ticker.lagSmoothing(0); これがないと、スクロールと画像の動きがずれたり、カクついたりする原因になります。 画像のアスペクト比に注意 .img-container の padding-top: 80% は、横100に対して縦80の比率を作っています。もっと横長にしたい場合は 60% 程度に、縦長にしたい場合は 120% などに調整してください。ただし、元画像の比率と大きく異なると、画像の切り取り位置が不自然になることがあります。 コンテナと画像の中央揃えを確認する 画像は left: 50% と translateX(-50%) で中央揃えにしています。パララックスで上下に動かしても、水平方向の中心は常に保たれるため、左右の余白が不均等になる心配はありません。 スマホでの動作を確認する モバイル端末では、GSAPとLenisの動作がPCと異なる場合があります。特にiOSの慣性スクロールとの兼ね合いで、予想と違う動きをすることがあるため、実機での確認をおすすめします。必要に応じて、モバイルでは scrub を無効にするなどの条件分岐を検討してください。 同じページに複数のパララックスを置く場合 .img-container ごとにScrollTriggerが生成されるため、1ページに多数設置すると、低スペックな端末では動きが重くなる可能性があります。5〜6カ所程度であれば問題ありませんが、それ以上並べる場合は、画面内に入った要素だけアニメーションを有効にするなどの最適化を検討してください。 クラス名の衝突に注意 .img や .img-container は汎用的な名前です。既存のテンプレートやCSSと競合する場合は、.parallax-img や .parallax-container など、より固有のクラス名に変更してください。 出典 Image parallax effect [GSAP]

スクロールに合わせて画像がゆっくりと上下する「パララックス効果」を、GSAPとLenisを使って実装するコードをご紹介します。画面に入ってくる画像に奥行きのある動きを加えることで、ページ全体がぐっと印象的になります。 GSAPとは GSAP (GreenSock Animation Platform) は、JavaScriptで作られた高性能なアニメーションライブラリです。CSSでは表現しきれない複雑なタイムライン管理や、細かいイージング設定、スクロール連動のアニメーションなどを、少ないコードでスムーズに実現できます。 特に強力なのは「ScrollTrigger」というプラグインです。スクロール位置をトリガーにしてアニメーションの進行度を制御でき、「スクロールしている間だけ動画が再生される」ような表現が可能になります。今回のパララックスも、このScrollTriggerを使って実装しています。 parallaxとは パララックス (視差効果) とは、背景と前景のスクロール速度に差をつけることで、奥行きや立体感を演出する手法です。たとえば、ページ全体のスクロール速度に対して、画像だけを少し遅れたり早かったりする速度で動かすことで、「画像が浮かび上がっている」ような印象を与えます。 Webデザインでは、単なる画像表示に動きを加えることで、ユーザーの視線を自然に誘導したり、ファーストビュー以外のエリアにも高級感を持たせたりする効果があります。 このコードの特徴 スムーススクロールとGSAPが連携している このコードでは、スムーススクロールライブラリ「Lenis」を組み合わせています。Lenisは慣性を持った滑らかなスクロールを提供し、そのスクロール位置をGSAPのScrollTriggerにリアルタイムで渡しています。マウスホイールやタッチ操作の細かい動きまで、画像のパララックスに正確に反映されます。 ライブラリ 役割 GSAP アニメーション本体の制御 ScrollTrigger スクロール位置とアニメーションを連動 Lenis 慣性付きスムーススクロールの提供 GPUで処理される軽量なアニメーション 画像の動きは transform: translateY() に相当する yPercent で実現しています。レイアウトを変更しない transform プロパティのみを使用しているため、GPUで処理されやすく、再描画の負荷が小さくなります。複数の画像を並べても、比較的軽快に動作します。 画像のはみ出しを考慮した構造 画像には初期状態で scale(1.4) がかかっています。これは、パララックスで画像を上下に動かしたきに、コンテナから画像が切れてしまわないよう、「余白」を確保するためです。コンテナには overflow: hidden と padding-top: 80% (縦横比の設定) が指定されており、どのような画面サイズでも画像がきれいに収まります。 スクロール範囲全体で自然に動く scrub: true を指定することで、スクロール位置とアニメーションの進行が1対1で連動します。スクロールを止めれば画像も止まり、戻せば像も逆再生されるため、操作感に違和感がありません。 サンプル 実装コード HTML・CSS HTML・CSS JavaScript カスタマイズ例 パララックスの動き幅を変える yPercent の値が大きいほど、画像の移動量が増えます。控えめにしたい場合は数値を小さくしてください。 tl.fromTo(img, { yPercent: -10, ease: 'none' }, { yPercent: 10, ease: 'none' }); スクロールの滑らかさを変える Lenisの lerp 値は、0に近いほど素早く追従し、1に近いほどゆるやかになります。デフォルトは 0.07 ですが、もっとダイレクトなスクロール感にしたい場合は小さく、より重厚な動きにしたい場合は大きくてください。 const lenis = new Lenis({ lerp: 0.03 // より重厚で滑らか }); 画像の初期ズームを調整する scale(1.4) はパララックスの移動余白を確保するための値です。移動量を大きくした場合は、この値も大きくしないと画像の端が見えてしまいます。逆に、移動量が小さい場合は 1.2 程度に縮小できます。 section .img .img-container img { transform: translateX(-50%) scale(1.2); } スクロール開始位置と終了位置を調整する デフォルトでは、要素がビューポートに入ってから出るまでの間にアニメーションが完了します。開始タイミングを早めたり、終了を遅らせたりする場合は、start と end を指定します。 scrollTrigger: { trigger: container, scrub: true, start: "top bottom", // 要素の上端が画面下端に来たとき開始 end: "bottom top" // 要素の下端が画面上端に来たとき終了 } 横方向のパララックスに変更する 縦スクロールページで横に動かしたい場合は、yPercent を xPercent に置き換えます。 tl.fromTo(img, { xPercent: -10, ease: 'none' }, { xPercent: 10, ease: 'none' }); 動きを控えめにする (アクセシビリティ対応) OSの設定で「視覚効果を減らす」を有効にしているユーザーには、パララックスを無効にする配慮ができます。 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (!prefersReducedMotion) { // パララックスのアニメーション処理を実行 } 実装時の注意点 LenisとGSAPの連携を忘れない Lenisを導入するだけではScrollTriggerがスムーススクロールの位置を認識できません。必ず以下の3行を追加してください。 lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add((time)=>{ lenis.raf(time * 1000); }); gsap.ticker.lagSmoothing(0); これがないと、スクロールと画像の動きがずれたり、カクついたりする原因になります。 画像のアスペクト比に注意 .img-container の padding-top: 80% は、横100に対して縦80の比率を作っています。もっと横長にしたい場合は 60% 程度に、縦長にしたい場合は 120% などに調整してください。ただし、元画像の比率と大きく異なると、画像の切り取り位置が不自然になることがあります。 コンテナと画像の中央揃えを確認する 画像は left: 50% と translateX(-50%) で中央揃えにしています。パララックスで上下に動かしても、水平方向の中心は常に保たれるため、左右の余白が不均等になる心配はありません。 スマホでの動作を確認する モバイル端末では、GSAPとLenisの動作がPCと異なる場合があります。特にiOSの慣性スクロールとの兼ね合いで、予想と違う動きをすることがあるため、実機での確認をおすすめします。必要に応じて、モバイルでは scrub を無効にするなどの条件分岐を検討してください。 同じページに複数のパララックスを置く場合 .img-container ごとにScrollTriggerが生成されるため、1ページに多数設置すると、低スペックな端末では動きが重くなる可能性があります。5〜6カ所程度であれば問題ありませんが、それ以上並べる場合は、画面内に入った要素だけアニメーションを有効にするなどの最適化を検討してください。 クラス名の衝突に注意 .img や .img-container は汎用的な名前です。既存のテンプレートやCSSと競合する場合は、.parallax-img や .parallax-container など、より固有のクラス名に変更してください。 出典 Image parallax effect [GSAP]