Framerで慣性スクロール（スムーススクロール）を実装する方法
こんにちは。今回は最近のデザインや体験が良いWebサイトでよく見る「慣性スクロール」を、Framerで実装する方法を紹介します。
慣性スクロールとは？
慣性スクロール（スムースクロール）とは、Webページをマウスやトラックパッドでスクロールしたときに、素早くカクカク動くのではなく、滑らかで余韻が残るようなふんわりとした動きをする仕様のことをいいます。昨今のWebデザインアワードで受賞されているサイトで使われているのをよく見かけます。日本のWebサイトでも多く使われるようになりました。穏やかで情緒的な雰囲気を出すことができるので、ブランドやサイトの世界観がさらに強化されます。
コーディングであればLenisやGSAPなどのライブラリを使って実装することができます。
Framerでの実装方法
Framerでも慣性スクロールを実装することができます。しかも1分ほどで再現できます。コピペするだけで完了します。
Framerでは、Reactを使った「コードコンポーネント」や「コードオーバーライド」、HTML、JavaScriptを使って<head>・<body>に書く「カスタムコード」が使用できます。今回は、より簡単に再現できるコードコンポーネントを使って実装していきます。
ステップ①：コンポーネントをコピーする
以下のURLをコピーします。クリックして開かずに、リンクをコピーするだけで大丈夫です。
https://framer.com/m/Smooth-Scroll-eZbz.js@ALzPzo9ZL7qsyNt6jnNi
ステップ②：プロジェクトにペーストする
Framerでプロジェクトのエディター画面を開きます。該当するページへ行き、キャンバス内にペーストします。すると紫色のボックスで囲われたコンポーネントが貼り付けられます。
レイヤーの一番上に移動させます。
これで完了です。プレビューを見てスクロールしてみましょう。
貼り付けたコンポーネントを選択し、画面右のプロパティパネルより数値を変更できます。数値によって慣性スクロールの滑らか具合が変化します。