gsapのFLIPプラグインを使ってヘッダーロゴがダイナミックに変化するFLIPアニメーションを作ってみよう

こんにちわ。nap5です。

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

以下の記事と関連しています。

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

I mocked this "FLIP animation" header using gsap FLIP plugin.

related tweet using react-flip-toolkit.https://t.co/8dpZ2qFytP#react #render #javascript #FLIP #gsap #100DaysOfCode

demo codehttps://t.co/slDrXJYsiM

demo sitehttps://t.co/oWgzjWcZCj

— nap5 (@napzak5) August 31, 2022

デモサイトです。

Vite App

デモコードです。

young-thunder-n5mvbd - CodeSandbox

GSAPのFLIPプラグインのほうが、アニメーション時間などを細かく制御できるので、融通が効きやすいですかね。

『 CO-WRITE（コライト）』では実践的でイノベーティブな情報を、連日書き下ろし掲載しています。

CO-WRITE｜アートサイエンスで『 ○△□ 』する

簡単ですが、以上です。