Animate variables in Interactions with GSAP

Animate the variables behind your styles directly in Interactions with GSAP.

Variable animation brings your design system into your motion workflow. Instead of managing hardcoded values in every interaction, you can animate the same variables that already drive your styles — keeping animations consistent, reusable, and easy to update as your design system evolves. Interactions with GSAP supports two ways to use variables:

• Animate Variable action — tween variable values over time
• Variable binding — bind a variable to a supported field in an existing action type

What is variable animation?

Variable animation lets you animate the variables behind your styles instead of manually managing hardcoded values in each interaction. This makes it easier to:

• keep motion aligned with your design system
• reuse the same values across styles and interactions
• coordinate multiple variable changes in one interaction
• update animations more efficiently over time

How to animate variables

The Animate Variable action lets you tween variable values over time as part of an interaction. You can animate multiple variables within a single action. Supported variable types: color, size, percentage, and number.

To add an Animate Variable action:

1. On the canvas, select an element
2. Go to the Interactions panel
3. Choose a trigger 
4. Click Add an action > Animate variable
5. Click the Add icon by "Variable" to add a variable
6. Set the target value
7. Configure timing, easing, and tween options as needed
8. Preview the animation to make sure it works

How to bind variables in preset actions

You can bind variables to supported fields across other action types, including custom animations, Set actions, Lottie actions, and Spline scenes. This keeps individual action settings connected to your design system without needing a separate Animate Variable action.

To bind a variable to an action field:

1. Open a supported action in the Interactions panel
2. Click the purple binding dot next to a supported field
3. Choose a variable from your collections