embla-carouselライブラリを使ったワイプ操作で実現できるページ遷移ぽいコンポーネントの切り替え方法について

こんにちわ。nap5です。

embla-carouselライブラリを使ったワイプ操作で実現できるページ遷移ぽいコンポーネントの切り替え方法について紹介したいと思います。

embla-carouselライブラリはこちらになります。

A lightweight carousel library with fluid motion and great swipe precision

正確にはルーティングライブラリを使わないページ遷移ぽいものではありますが、ワイプでコンポーネントを切り替えたいときは便利かなと思い、デモを用意してみました。

デモコードです。

serene-murdock-bxgh9z - CodeSandbox

デモサイトです。

Vite App

デモではコンポーネントの切り替えを検知してframer-motionで動きを付けてみました。ただ、この場合、スナップハンドリングが大変になるので、ワイプ起点のアニメーションのキック処理はあまりやらないほうがいいです。

縦長に長いコンテンツはrc-scrollbarsライブラリを使ってオーバーフローをハンドリングしつつ、タブレット端末での操作を想定している場合にはこのデモのようなUIは生かせるかもしれませんね。

最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。

また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/

Web標準のJavascript Animation APIを使ったインタラクティブなカウントアップダウンの作り方

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。