こんにちわ。nap5です。

swiperjsとframer-motionを組み合わせてスライドと説明文を連動させたインタラクティブなスライダーを作ってみたので、紹介したいと思います。

以前の記事と関連です。

swiperjsライブラリはこちらになります。

framer-motionライブラリはこちらになります。

以下のデモですが、不安定のため、zipにしたものも添付します。zipファイルダウンロード後、展開します。展開後のディレクトリに移動した後、以下のコマンド打つとデモが動きます。

$ cd 展開後のディレクトリ
$ yarn install
$ yarn dev

デモサイトです。

デモコードです。

苦戦したのが、スナップキャンセルのハンドリングです。

デモではスナップエンドしきらない場合は、300ms秒後ぐらいに強制的にマウントさせるように工夫しています。スナップエンドが正常にした場合でもマウントさせるロジックは走るので、処理が重複することがあるのですが、ステート自体は変化せず、UIの挙動には影響を与えないので、まぁいいかという判断をしました。

この挙動をハンドリングする手間がないsplidejsの方が機能を達成するハンディさの面でいうと楽でした。

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

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

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

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

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

簡単ですが、以上です。