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.
Note
Interactions can also include conditions that determine whether a trigger should run its timeline.
How to create an action
When you start creating an interaction, choosing an action is one of the first things you’ll do.
Go to the Interactions panel
Click New interaction
Choose your Trigger type
Choose either a custom action or one of the predefined actions in the modal window
Customize your trigger targets and action targets as needed
Click the animation’s name at the top of the panel to customize it
Configure the action’s settings (like duration/easing) and the properties you want to change on the target (like transform or opacity)
If you’d like to add multiple actions to an animation, click the “back” icon next to your action’s name. Then click the “plus” icon and choose your new action, then customize it as needed. You can also add actions directly in the interactions timeline.
Presets
You can save actions for reuse across your site with presets. This helps increase consistency and branding across your site. To save an action preset click the “Save as preset” bookmark icon next to the action’s name. Then you can search for existing presets from the left-hand Interactions manager panel.
Action types
There are four 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
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.
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
Note
Class changes are available through Set actions (not Animation actions).
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.
Hiding actions
You can hide actions to temporarily stop them from running without deleting them. Hidden actions stay in your timeline and remain editable — they just won’t play in preview mode or on the published site until you turn them back on.
This is useful for debugging, trying variations, or staging works-in-progress while you build the rest of the interaction.
To hide an action, click the “eye” icon next to the action in the Interactions panel. You can also right click an action in the timeline and click Show/Hide.
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 hand inline block elements.
Why is my animation jumpy?
Avoid combining CSS transitions with GSAP animations on the same element. Also, we recommend using transforms and opacity over layout properties such as width or height.
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?
We don’t recommend you use CSS transitions and interactions together on the same element/property because they may conflict when animating.