Lenisスムーズスクロール×要素変形アニメーションのプロンプト作例

この実装は、スクロールトリガー要素変形付きLenisスムーズスクロールをデモンストレーションします。ページには上部に固定されたスクロール進捗インジケーターとグラデーションバックグラウンドがあります。4つの異なるセクションにはそれぞれ、スクロール位置に基づいて変形するカードが含まれています：スケーリング、回転、不透明度変化、および3つすべての組み合わせです。

Lenisライブラリは滑らかなスクロールを提供し、GSAPがアニメーションを駆動します。各カードはスクロール進捗に連動した独自の変形を持ち、魅力的なインタラクティブ体験を創出します。スクロール進捗バーはページ上の位置を視覚的に表示します。

変形はビューポートに対する要素の位置に基づいて計算され、ユーザーのスクロールに応答するシームレスなアニメーションを作成します。実装はレスポンシブで、異なる画面サイズで動作します。