gsapのFLIPプラグインを使ってインタラクティブな商品説明ページを作ってみた

こんにちわ。nap5です。

gsapのFLIPプラグインを使ってインタラクティブな商品説明ページを作ってみたので、紹介したいと思います。

Docs

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

I mocked up this FLIP aniamtion page using gsap.#react #javascript #FLIP #gsap #100DaysOfCode

referencehttps://t.co/IJxlLcGJyN

demo codehttps://t.co/b5rp1NZqum

demo sitehttps://t.co/QaAH0Ey5ec

— nap5 (@napzak5) July 24, 2022

デモサイトです。

Vite App

デモコードです。

amazing-greider-28dvj8 - CodeSandbox

gsapのFLIPライブラリを使ってアニメーションする際は以下の手順で実現します。

1. アニメーションしたいDOMをもとにフリップ前のステート状態を保持する

2. アニメーションしたいDOMにアニメーションさせるCSSプロパティを直接設定ないしクラス経由で設定する

3. FLIP.fromメソッドを呼び出してフリップ前のステート状態からアニメーションを実行する

デモではframer-motionで少しアクセントをつけてみました。

メンバーシップ制度を始めました。掲示板の方が、アクティブにポストしているので、よかったら、覗いてみてください。

Nap5の部屋｜nap5

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

Tweets by napzak5

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

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

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

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

簡単ですが、以上です。