見出し画像

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

こんにちわ。nap5です。



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



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



デモサイトです。


デモコードです。


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

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

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

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


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


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


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


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

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


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

簡単ですが、以上です。

この記事が気に入ったらサポートをしてみませんか?