メイソンリーレイアウトの慣性スクロールアニメーション

note

縦横の比率が異なるそれぞれの要素が、積み重なったレンガのように隙間なく埋め尽くされたメイソンリーレイアウトです。このレイアウトにスクロールの慣性を加え、各要素がスクロールに連動して変形するアニメーションを実装しています。通常のグリッドレイアウトとは異なるオシャレな見た目に、スクロールの動きに対して滑らかに反応する動きが印象的です。

メイソンリーレイアウトはこの記事を書いている時点では、まだ各種ブラウザのサポートが十分でないため、GridレイアウトとJavaScriptを使って動的に実装する必要があります。行のトラックサイズをGapの値に合わせて自動設定し、各アイテム要素の高さを取得して、その高さに応じたグリッドスパンを動的に当てるようにします。慣性スクロールについてはGSAPのScrollSmootherプラグインを採用し、グリッドコンテナー要素の中身がスクロールに連動して移動するアニメーションを実装します。その際にスクロールの移動量に応じて、要素の変形率が決まるようにしています。

スクロールに慣性を設けることで、より操作感がリアルに伝わるとともに、コンテンツに集中して見てもらうことが期待できます。またスクロール駆動のアニメーションとも相性が良いので、より魅力的な動きになることが期待できます。ただし、ユーザーが操作するUIが多く設置されている画面ではユーザビリティを損なう点にも配慮する必要があります。

【使用ライブラリ】 GSAP:ScrollSmoother