Actions and animations in Interactions with GSAP

Learn the action types available and how they interact with your target properties.

Actions are steps that run after a trigger fires. Triggers often listen to events on a trigger target (the element(s) Webflow listens to), except for non-element triggers like Page load and Custom events.

Actions apply changes to action targets (the element(s) being changed). Actions run on a timeline, you can configure them to run in sequence or in parallel. Some actions are instantaneous, while others interpolate values over time.

When you're ready to put a actions to use, see our how-to guide.

Action types

There are six action types you can add to an interaction:

Animation

Animation actions interpolate ("tween") property values over time. Webflow supports three animation types:

• From — set starting values in the Interactions panel, which then tweens to the element's current styled values (in the Style panel)
• To — starts from the element's current styled values (in the Style panel), then tweens to values you set in the Interactions panel
• FromTo — set both start and end values in the Interactions panel

Set

Set actions apply changes instantly at a point on the timeline (duration is always 0). Use set actions for changes that shouldn't be tweened, like:

• Class changes (add/remove/toggle)
• Properties that can't be interpolated (like display)
• Preparing an element right before an animation starts

See Set actions in Interactions with GSAP for the full breakdown.

Lottie

Lottie actions let you control Lottie animations as part of the interaction timeline.

Spline

Spline actions let you modify and animate Spline 3D scenes.

Animate variable

Animate Variable actions tween variable values over time. Use an Animate Variable action when you want an interaction to drive changes to your design variables, like animating a color, size, or number variable, rather than hardcoding values directly on an element. You can animate multiple variables within a single action.

See Animate variables in Interactions with GSAP for the full breakdown, including how to bind variables to other action types.

Rive

Rive actions let you set or animate ViewModel properties inside a Rive animation, like numbers, colors, booleans, and artboards, directly from your interaction timeline.

See Control Rive animations with Interactions with GSAP for the full breakdown.

Action properties vs target properties

When you configure an action, you'll usually adjust two different kinds of options:

Action settings (timeline controls)

These affect how an action plays on the timeline:

• Duration — the total time of an action
• Start time — when the action begins on the timeline
• Easing — the relative acceleration and deceleration of an action (choose a preset or open the advanced easing editor)
• Staggered motion — whether target elements animate together, the total time from first to last element, or whether there is a delay time between each target element's action(s)
• Repetition — how many times the action repeats. You can define a precise number of repetitions, set it to "infinite," or repeat in a back-and-forth manner

Target properties (what changes on the target)

These are the properties you're changing on the action's target, such as:

• Transform — changes an element's position, rotation, scale, etc.
• Style — changes visual properties like opacity, background, border, text, and more

Text splitting

The split text option lets you break text elements into individual words, lines, or characters for staggered animations. For instance, if you'd like each letter of an H1 to slide in on animation, split text allows you to do that without having to break each letter into a separate element.

FAQ

Why won't my element move on the canvas?

If you're trying to set an action on an element but it's not moving, you may have the element set to inline. Inline elements don't work with transform actions.

Why isn't split text working on my elements?

Balance and justify text may not work with some split text configurations. This is due to the way browsers handle inline block elements.

Why is my animation jumpy?

Avoid combining CSS transitions with GSAP animations on the same element. Also, using transforms and opacity over layout properties such as width or height is recommended.

Why aren't my 3D animations working?

Make sure the animated elements are inside a container with perspective applied.

Can I use CSS transitions and interactions together?

Using CSS transitions and interactions together on the same element/property isn't recommended, since they may conflict when animating.