Alpha Design

GSAP HTML/CSS JavaScript

架空のブランド紹介ランディングページです。
GSAPを使用したスクロール連動アニメーションを取り入れたいという思いから作成してみました。

WEB SITE

POINT: ・スクロール連動アニメーション
スクロール連動アニメーションをGSAPで実装しました。スクロールに合わせた画像の回転、一部セクションの横スクロール処理（PC表示のみ）、各セクションの重なり表現など、ScrollTriggerの機能を多く使用しています。

・慣性スクロール
慣性スクロールをLenis.jsを使用して取り入れました。
ページ数: 1 ページ
使用技術: GSAP / Lenis.js / JavaScript / HTML/CSS
URL: https://alphadesign.mikanbako.jp/
Github: https://github.com/y-nagai0725/lp-gsap
デザイン: Figmaページ（閲覧のみ可能です）