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

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