> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Create interaction

> Create an interaction with triggers and inline timelines.

## `webflow.interactions.create(params)`

Create a new interaction. If the Interactions panel is set to Interactions with GSAP and the interaction is visible on the current page, the Designer selects it. Selecting it opens the timeline bar on the canvas. Component-scoped interactions and `pages` scopes that omit the current page are not selected.

### Syntax

```typescript
webflow.interactions.create(params: InteractionCreateInput): Promise<Interaction>
```

### Parameters

* **params.pageId** : *string* - The page the interaction is authored on.
* **params.name** : *string* - Display name of the interaction.
* **params.triggers** : *InteractionTrigger\[]* - Triggers for the interaction.
* **params.timelines** : *InteractionTimelineInput\[]* - Timelines with actions resolved inline.
* **params.scope** : *InteractionScopeInput* - Where the interaction applies. When omitted it is site-wide (fires on every page), not scoped to `pageId`. Pass `{type: 'pages', value: [pageId]}` to limit it to this page. Default: `{type: 'site'}`.
* **params.conditionalPlayback** : *InteractionConditionalPlaybackItem\[]* - Reduced-motion or breakpoint playback rows.

Omit `timelineDefaults`. `create` rejects any value.

For every field and value these parameters accept, see [Interaction schema](/designer/reference/interaction-schema).

### Returns

**Promise\<*Interaction*>**

A Promise that resolves to the created interaction, with generated ids and resolved timelines.

### Example

The `wf:class` target below assumes a `hero-btn` class already exists on the site. The Designer resolves the class slug to a style block id when it saves. It rejects a slug that matches no class, or more than one.

```typescript
const created = await webflow.interactions.create({
  pageId: (await webflow.getCurrentPage()).id,
  name: 'Fade in on load',
  triggers: [{extensionKey: 'wf:load', config: {}}],
  timelines: [
    {
      name: 'Fade',
      actions: [
        {
          id: 'a1',
          name: 'Opacity',
          timing: {duration: 0.6},
          properties: {'wf:transform': {opacity: ['0%', '100%']}},
          targets: [{extensionKey: 'wf:class', value: 'hero-btn'}],
        },
      ],
    },
  ],
});
```

For click, hover, scroll, mouse move, and custom event examples, see [Interaction examples](/designer/reference/interaction-examples).

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)

### Designer Ability

| Designer Ability          | Locale | Branch | Workflow | Sitemode |
| :------------------------ | :----- | :----- | :------- | :------- |
| **canModifyInteractions** | Any    | Main   | Canvas   | Design   |