GSAPからRiveアニメーションを直接制御可能になりました！

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

Manipulate Rive animations using Interactions with GSAP

‍

GSAPを利用したインタラクションから、Riveアニメーションを直接制御できるようになりました。Riveシーン内のデータとインタラクションを連携することで、スクロールやクリック、ページ遷移などの操作に応じてアニメーションをリアルタイムに変化させることができます。

主な機能

• Riveファイルで公開されたViewModelデータを制御可能
  • アートボード
  • 数値
  • テキスト
  • カラー
  • Boolean
  • Enum
• 1つのRiveコンポーネント内で複数のアートボード状態を切り替え可能
• インタラクションのタイミングに合わせて、Riveのステートマシン遷移を実行可能
• WebGL2ベースの描画に対応し、図形やテキスト、線のエッジをより滑らかに表示
• 他のアニメーションと同じGSAPタイムライン上でRiveのプロパティ変更を管理可能
• タイムラインの逆再生時も、アニメーション状態を適切に復元

デザイナーでの利用方法

Rive要素を選択し、インタラクションパネルから「Set Rive」または「Animate Rive」を選択します。

読み込まれた .rivファイルのViewModelや各種プロパティが自動的に利用可能となり、位置移動や透明度変更などのアニメーションと同じタイムライン上で設定できます。

また、カラー設定ではHEX、RGB、HSL、カラー名を利用でき、自動的に変換されます。インタラクション開始時の状態は自動的に保持されるため、逆再生時にも元の状態へ正しく戻ります。

‍