GSAPのインタラクションに新しいアクションタイプLottie & Setが登場しました！

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

New action types in Interactions with GSAP: Lottie & Set

‍

本日、WebflowはGSAPのインタラクション内に2つの新しいアクションと、ターゲティング機能の改善を追加しました。
これにより、より精密で表現豊かなモーションを、より少ない手間で構築できるようになります。

1. Lottie アニメーションをインタラクション内で直接制御

これまでCustom Codeなどを用いて実装する必要のあったLottieアニメーションが、
そのままGSAPインタラクションのタイムライン上で制御可能になりました。

• 再生
• 停止
• スクラブ（再生位置の調整）
• トリガー操作

などを好きな箇所に配置できます。

マイクロインタラクションから複雑なアニメーション演出まで、一貫したワークフローで実装できるようになりました。

‍

2. 新アクション「Set」で即時変更を実現

Setアクションは、アニメーションを伴わない “瞬時の状態変更” を行うための新機能です。

特に次のような場面で役立ちます

• クラスを切り替える（class toggle）
• 要素を表示 / 非表示にする
• アニメーション不可プロパティを更新する

「ここは動かさずパッと変えたい」という操作を、GSAPタイムラインの中で簡単に扱えるようになります。

‍

3. 要素ターゲティングが大幅に強化

ターゲット指定の操作性も改善されました。

• 兄弟要素（sibling）
• 子要素（child）
• 親要素（parent）
• 関連要素（related elements）

などをスムーズに選択できる新しいUIが導入され、
トリガー要素周辺のすべての対象を一度で選択できるなど、操作性が格段に向上しています。

‍

これらのアップデートで実現できること

• より整理されたタイムライン構築
• クラス切り替えなど、長らく要望の多かった操作への対応
• 状態変化の表現をより明確に
• 複雑なアニメーションフローを簡潔に管理可能

GSAPを使った表現が、これまで以上に直感的かつ柔軟になります。

‍

‍