FLIPアニメーションを使ってソート機能を作ってみよう～tidyjsを添えて～

こんにちわ。nap5です。


FLIPアニメーションを使ってソート機能を作ってみたので、紹介したいと思います。

前回の記事と関連です。

ソート機能ではtidyjsライブラリを使用しています。

tidy.js

FLIPアニメーションライブラリでは以下を使用しています。

デモサイトです。

Vite App

デモコードです。

thirsty-grass-9r8ylk - CodeSandbox

レスポンスタイムが意識されるUIではアニメーションは控えめにしておくといいかもしれないです。今回のデモでは「Theアニメーションしてるぞ」という感じを出しています。

FLIPアニメーションを使いこなしていけると、表現の幅が広がって面白いので、いろいろなUIコンポーネントの細部のところで取り入れていくのはよいかもですね。

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

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

Tweets by napzak5

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

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

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

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

簡単ですが、以上です。