GSAPを使った変数アニメーションが可能になりました！

※この記事は2026年03月26日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Animate variables using Interactions with GSAP

‍

昨年、WebflowではGSAPを活用したInteractionsを導入し、より強力なアニメーションワークフローを提供しました。2026年03月26日より、変数アニメーションのサポートや、アクション間での変数バインディングの拡張により、その機能をさらに強化しました。

これにより、変数を直接Interactionsでアニメーションさせることが可能になりました。スタイリングに使われていた再利用可能なデザイントークンを、アニメーションの動きにも活用できるため、ハードコーディングなしでよりスケーラブルかつ保守性の高いモーションを作成できます。

また、カスタムアニメーション、Setアクション、Lottie、Splineなどのプリセットアクションでも変数バインディングがサポートされ、異なるアニメーションワークフローでもデザインシステムに沿ったアニメーションの管理が容易になります。

さらに、1つのInteraction内で複数の変数をアニメーションさせることができるようになり、複雑なエフェクトの調整も簡単に行えるようになりました。これにより、アニメーションが常にデザインの真実の情報源と整合した状態で保たれます。

これらのアップデートはすでに利用可能です。

‍