Olivier Larose(Oli)が運営する、Webアニメーションとインタラクションの実装チュートリアルを集めたブログ。React / Next.js を土台に、GSAP・Framer Motion・Three.js(React Three Fiber)・SVG を使った表現を、動くデモとコードのセットで解説している。
扱うテーマはカテゴリで整理されている。
主なカテゴリ
- スクロール: パララックス、マスク、グラデーション、SVGパスの描画
- マウス: 画像のディストーション、カスタムカーソル、マグネティックな追従、ギャラリー
- 3D: 波、ガラス、キューブ、シェーダー
- UI: メニュー、ボタン、ページトランジション
最近のチュートリアルには「Mask Section Transition」「Mouse Image Distortion」「Background Image Parallax」などがある。体系的に学びたい人向けに「Web Animation Course」も用意され、「Next.js Page Transition Guide」のような記事も読める。
派手なエフェクトの寄せ集めではなく、1つの効果をコード付きで再現できる形に落とし込んでいるのが特徴。Next.js でアニメーションを実装するときの実装リファレンスとして使える。