framer-motionとFLIPアニメーションを使ってギャラリーUIを作ってみよう

こんにちわ。nap5です。


framer-motionとFLIPアニメーションを使ってギャラリーUIを作ってみたので、紹介したいと思います。

使用したライブラリについては以下になります。

Documentation | Framer for Developers

デモコードは以下になります。

zealous-khayyam-kv3hg7 - CodeSandbox

デモサイトです。

Vite App

FLIPするアイテムにグラフなどはマッチしそうと思いました。

グラフ系のライブラリと混ぜて使ってみたいUIですね。

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

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

Tweets by napzak5

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

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

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

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

簡単ですが、以上です。