見出し画像

framer-motionで実現するマイクロインタラクションなメニューの作り方

nap5

こんにちわ。nap5です。


framer-motionで実現するマイクロインタラクションなメニューの作り方の一つを紹介したいと思います。


まず初めに、デモですが、今までcodesandboxで公開していたのですが、いくつかのデモでは動かない事象を確認しています。公開直後は参照できていることを確かめてからnoteに記載していますが、不安定な要素が残るため、ホスティングサービスとしてrenderというものを使用しています。これまでの記事の中でcodesandboxで公開しているものはすべて確認し、renderでホスティングしたデモサイトのリンクを加筆修正していますので、よろしくお願いいたします。


Twiiterにも投稿してみました。




今回使用しているframer-motionライブラリはこちらになります。


以下のcodesandboxのデモが見れない場合のフォールバックとしてrenderというホスティングサービスでデプロイしたものも用意しました。


デモコードです。



デモサイトです。



実装のポイントは背景を動かすので、それ用のDOMを絶対配置で用意してホーバーされたメニュー位置へ動かすことです。


あとはアクティブなメニューの配列インデックスをステートで保持しながら、各種DOMへシンクロさせていけばよいです。


framer-motionのAPIとしてuseAnimationControlsは便利なので、よく使っています。このデモを通して触れておくと他のコンポーネント作成でも応用が利くかもしれません。


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



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




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





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


簡単ですが、以上です。

いいなと思ったら応援しよう！