react-flip-toolkitライブラリを使ってヘッダーロゴがダイナミックに変化するFLIPアニメーションを作ってみよう

こんにちわ。nap5です。


react-flip-toolkitライブラリを使ってヘッダーロゴがダイナミックに変化するFLIPアニメーションを作ってみたので、紹介したいと思います。

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

I mocked this flip animation header log using react-flip-toolkit.#cloudflare #react #FLIP #javascript #reactfliptoolkit

demo codehttps://t.co/KTW01h7uDL

demo sitehttps://t.co/J0rsRAdXRf

— nap5 (@napzak5) August 31, 2022

react-flip-toolkitライブラリはこちらです。

デモサイトです。今回はホスティングとしてcloudlflareを使っています。

Vite App

デモコードです。

recursing-aj-ni7ryy - CodeSandbox

オープニングなどで取り入れてもいいかもですね。GSAPのFLIPプラグインでも実現できると思います。こちらのほうが細かく設定パラメータを管理できるので、ハンディかもしれません。

Docs

簡単ですが、以上です。