スクロールのアニメーション一覧 | アニモーション

CSS Scroll Timeline Fade

CSS Scroll-driven Animationsでスクロールに連動してフェードインする。

Anime Stagger Scroll Cards

スクロールで画面内に入ったカードがanime.jsでスタガー表示される。

Canvas Scroll Aurora

スクロールに連動してCanvasのオーロラ表現が変化するビジュアルエフェクト。

Scroll Progress Bar

ページ上部にスクロール進捗バーを表示する@propertyアニメーション。

GSAP Text Parallax Scroll

GSAPのScrollTriggerで大文字テキストが異なる速度でスクロールするパララックス。

Clip Expand Scroll

スクロールでclip-pathが拡大しコンテンツが画面全体に広がるCSSアニメーション。

Three.js Scroll Rotate

スクロール量に応じてThree.jsの3Dオブジェクトが回転するインタラクション。

SVG Path Scroll Draw

スクロールに連動してSVGパスが徐々に描かれていくインタラクション。

Anime Scroll Counter

スクロールで表示されたらanime.jsで数値がカウントアップするセクション。

Canvas Scroll Particles

スクロール量に応じてCanvas上のパーティクルが散らばるインタラクション。

GSAP Pin Scale Section

GSAPのScrollTriggerでセクションがピン留めされスケールインするスクロール演出。

GSAP でスケールアップして登場するグリッド。

Slide From Left

左からスライドインする入場アニメーション。

Blur Scroll Reveal

ぼかしが解除されながらフェードインするリビール。

GSAP で回転しながらフェードインするカード。

Clip Path Reveal

clip-pathで切り取りながら現れるリビール。

Counter Scroll Trigger

GSAP ScrollTriggerで数字がカウントアップする。

Horizontal Scroll Section

横スクロールするカードセクション。ポートフォリオに。

Stagger Grid Reveal

GSAPでグリッドアイテムが時間差でフェードインする。

GSAP で要素がふわふわ浮遊するエフェクト。

Fade In Up on Scroll

IntersectionObserverでスクロール時にフェードインするセクション。

Proバッジ付きのアニメーションはProプランでコードをコピーできます。