GSAP連携 スタガーアニメーション

🚀 GSAP連携!コード不要のスタガーアニメーションをWebflowで実現する方法
💡 このコンテンツでは、多くの有名企業サイトでも採用されているJavaScriptライブラリ「GSAP」を使い、コードを一行も書かずに、目を引くスタガーアニメーション(要素が順番に表示されるアニメーション)を実装する方法を詳しく解説します。
🛠️ 実装は驚くほど簡単!
実装に必要な作業は、Webflow上でカスタム属性を設定するだけ。
アニメーションを適用したいリストの親要素にfc-gsap-staggered="list"という属性を追加するだけで、基本的なスタガーアニメーションが有効になります。
さらに、オプション属性を追加することで、アニメーションのタイミング、方向、速さなどを細かくコントロールできます。
📂 役立つリソース
GSAP公式サイト: https://gsap.com/
Finsweet Attributes: https://finsweet.com/attributes