The Response Editor is where you build custom animations for your interactions. 

To open it:

1. Select your trigger element (or the page).

2. Go to the Interactions tab on the Right Panel.

3. Add a Trigger and select Set New as your trigger response.

The Response Editor will open up at the bottom of the screen.

The Response Editor Layout

The editor has four main areas:

Toolbar

Contains controls for managing the response, adjusting the timeline view, and previewing your animation.

Left Column

Lists the target elements you’ve added to animate.

Timeline (or Progress Line)

The main area where you add and arrange animation actions. For time-based triggers like Page Load or Click, this is a timeline measured in seconds. For scroll-driven triggers like While Page is Scrolling or While Element is Scrolling, it becomes a progress line measured as a percentage of the scroll distance.

Right Column

Shows the properties of whatever action is currently selected, including duration, delay, transition, and the specific values for that action.

Add a Target

To start, you need to add a Target. A target is the element you want to animate. You can add multiple targets to a single response.

To add a Target, either:

• Select an element directly from the canvas.

• Click the plus (+) icon next to any element in the Layers panel while the Response Editor is open.

• Click Add Layer from the Right Column (shown when no targets exist yet).

The element will appear as a row in the left column of the editor.

Add an Action

Actions are the individual changes that happen to a target over time or page progression – a move, an opacity shift, a color change, and so on. Each action becomes a block on the timeline that you can position and resize.

To add an action, click on the timeline row for your target. A dropdown will appear with all available actions:

• Color
• Background Color
• Background Size
• Background Position
• Border Color
• Move
• Scale
• Size
• Rotate
• Skew
• Opacity
• Filter
• Radius
• Class Change
• Variable Mode

Select an action to add it as a block on the timeline.

Position Action With Precision

For more precision, hover over the row first. A blue vertical line will appear, indicating exactly where the action will be inserted, giving you more control over its position.

Once an action is added, you can:

• Drag the action block left or right along the timeline to change when it starts, which is a visual way to add delay.

• Drag the edges of the action block to adjust its duration. A diamond icon will appear on the blue vertical line for extra precision while dragging.

Edit an Action

Click any action block on the timeline to select it. The right panel will show its properties:

• Duration – How long the action lasts.

• Delay – How long to wait before the action starts.

• Transition – Control how the action accelerates and decelerates. Options include Ease, Ease In, Ease Out, Ease In and Out, and Linear. Or click on the graph icon to open the Custom Timing Editor.

• Action properties – Adjust the values for that action, such as X, Y, Z for Move, a value for Opacity, and so on.

Timeline Options

The timeline area includes a small set of tools that help you arrange and navigate your actions more precisely.

Snap Actions to the Timeline

Click the magnet icon to enable Snap Items. When on, actions snap to the end of other actions and to main time segments when dragged along the timeline.

Scale The Timeline

Click the + and – magnifying glass icons to Zoom In and Zoom Out of the timeline. You can also pinch on your trackpad or scroll with your mouse wheel to do the same.

Action Options

Right-click any action block on the timeline to access the following options:

Set an Action as Initial

Select Set as Initial to use that action’s values as the element’s starting state before the animation plays.

Duplicate an Action

Select Duplicate to create another copy of the action in the same position on the timeline.

Copy an Action

Hover over Copy to reveal three copy options:

• Copy Timing – Copies only the timing (duration and position) of the action.

• Copy Properties – Copies only the property values of the action (e.g., the opacity value or move distance).

• Copy Interaction – Copies the full action, including both its timing and properties.

Paste an Action

Select Paste to reveal three paste options. Options are only available if the corresponding data has been copied first:

• Paste Timing – Pastes only the timing onto a selected action.

• Paste Properties – Pastes only the property values onto a selected action. Only available if properties have been copied.

• Paste Interaction – Pastes the full action, including both timing and properties. Only available if a full interaction has been copied.

Group Actions

Hold CMD on Mac or CTRL on Windows and click to select multiple actions, then right-click and select Group to combine them. Grouping lets you move and manage multiple actions together.

Delete an Action

Select Delete to remove the action from the timeline permanently.

Target Options

Click the ellipsis (···) icon next to any Target in the Response Editor to access the following options:

Apply a Target to a Class

Select Apply to Class to apply the animation to all elements sharing the same class. 

Useful for repeating components like cards or buttons where you want consistent animation behavior without animating each element individually.

Change a Target

Select Change Target to swap the current target for a different element on the page.

Duplicate a Target

Select Duplicate Target to copy the target row along with all its actions.

Delete a Target

Select Delete Target to remove the target and all its actions from the response.

Toolbar Options

The Toolbar runs along the top of the Response Editor and gives you controls for managing the response itself, previewing your animation, and adjusting how you work on the timeline.

Rename a Response

Responses are titled “Response” by default, but you can click the pencil icon next to the response name to rename it.

Set Loops & Repeats

Click the Iterations icon to open the Loops & Repeats panel. 

Toggle Loop on to repeat the animation continuously, or set a specific number of repeats.

Undo and Redo

Click the Undo (left) and Redo (right) arrows to step backwards or forwards through your changes.

Preview Changes Live

Toggle Live on to preview any changes you make directly on the canvas as you make them.

Play an Animation

Click the Play button to play the full animation on the canvas.

Close the Response Editor

Click the X icon to close the Response Editor.

Response Options

Click the ellipsis (···) icon next to any Response in the Interaction panel to access the following options:

Edit a Response

Select Edit to reopen the Response Editor for that response.

Set Response Breakpoints

Select Breakpoints to control which screen sizes the animation runs on. Deselect any breakpoints where you don’t want the animation to play.

Duplicate a Response

Select Duplicate here to copy the response within the same trigger state.

Duplicate a Response to [Opposite Trigger State]

Select Duplicate to [Opposite State] to copy the response to the opposite trigger state. 

Keep in mind that this label updates based on the active trigger. For example: Scrolled Out for Scroll Into View, Hover Out for Hover, and 2nd Click for Click, and so on.

And of course, this option won’t appear for triggers that only have a single state.

Rename a Response

Select Rename to give the Response a custom name.

Delete a Response

Select Delete to permanently remove the response. You can also click the minus (–) icon next to a response to do the same.

Hide a Response

Click the eye icon, which you’ll find next to the ellipsis icon, to disable the interaction response.