![見出し画像](https://assets.st-note.com/production/uploads/images/83279324/rectangle_large_type_2_0a0bd8c0e4272edcd4719c58cb296f83.png?width=1200)
gsapのFLIPプラグインを使ってインタラクティブな商品説明ページを作ってみた
こんにちわ。nap5です。
gsapのFLIPプラグインを使ってインタラクティブな商品説明ページを作ってみたので、紹介したいと思います。
Twiiterにも投稿してみました。
I mocked up this FLIP aniamtion page using gsap.#react #javascript #FLIP #gsap #100DaysOfCode
— nap5 (@napzak5) July 24, 2022
referencehttps://t.co/IJxlLcGJyN
demo codehttps://t.co/b5rp1NZqum
demo sitehttps://t.co/QaAH0Ey5ec
デモサイトです。
デモコードです。
gsapのFLIPライブラリを使ってアニメーションする際は以下の手順で実現します。
アニメーションしたいDOMをもとにフリップ前のステート状態を保持する
アニメーションしたいDOMにアニメーションさせるCSSプロパティを直接設定ないしクラス経由で設定する
FLIP.fromメソッドを呼び出してフリップ前のステート状態からアニメーションを実行する
デモではframer-motionで少しアクセントをつけてみました。
メンバーシップ制度を始めました。掲示板の方が、アクティブにポストしているので、よかったら、覗いてみてください。
最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。
最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。
https://www.udemy.com/course/count-down-up-using-javascript-animation-api/
また、コースの内容紹介記事は以下になります。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか?