Create interaction

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

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.

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.

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 Ability