> This page is for DevLink.

> 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.

# Interactions

> Principles for interactions in Webflow to ensure clean export

[Webflow Interactions](https://help.webflow.com/hc/en-us/articles/33961357722643-Triggers-and-animations) are JavaScript-powered animations and transitions.
DevLink Export supports both engines that Webflow ships:

* **Classic Interactions (IX2)** — the original Webflow Interactions engine.
* **Interactions with GSAP (IX3)** — the newer GSAP-powered engine, with timelines and plugins such as `ScrollTrigger`, `SplitText`, and `CustomEase`.

Most interactions are supported in exported components.
See [Page interactions](#page-interactions) for limitations that apply to Classic Interactions.

## Enabling interactions

To enable interactions in your exported components, wrap your application in the `DevLinkProvider` component.
`DevLinkProvider` wires up both Classic Interactions (IX2) and Interactions with GSAP (IX3), so there is no separate provider to compose.

**`app/layout.tsx`**

```tsx title="app/layout.tsx"
import { DevLinkProvider } from 'webflow/DevLinkProvider';
import 'webflow/css/global.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <DevLinkProvider>
          {children}
        </DevLinkProvider>
      </body>
    </html>
  );
}
```

### Page interactions

Webflow components support [page triggers](https://help.webflow.com/hc/en-us/articles/33961357722643-Triggers-and-animations#page-triggers) with a limitation that applies to Classic Interactions (IX2) only: DevLink exports the first page interaction for each component.
If a component uses multiple page interactions across different pages, DevLink exports the first one.

This limitation does not apply to Interactions with GSAP (IX3), which must be scoped to the component being exported.

## Interactions with GSAP

DevLink Export ships animations built with the GSAP-powered Interactions engine.
For each component that has IX3 Interactions, DevLink emits:

* **Registration code** that runs through the `useIX3Interactions` hook.
* **`webflow_modules/devlink-ix3.js`** — the IX3 runtime that initializes GSAP and registers timeline data.
* **`webflow_modules/devlink-gsap.js`** — a per-export GSAP bundle that contains only the plugins your site uses, such as `ScrollTrigger`, `SplitText`, and `CustomEase`.

Plugin selection is driven by the Interactions on your site.
There are no CLI flags or `webflow.json` settings to configure.
Plugin dependencies are resolved automatically — for example, `CustomBounce` pulls in `CustomEase`, and `ScrollSmoother` pulls in `ScrollTrigger`.

Both bundles are lazy-loaded.
The IX3 runtime and GSAP bundle are fetched only after a component that uses `useIX3Interactions` mounts, so pages that don't render an animated component pay no runtime cost.

### Design guidance for IX3

Interactions with GSAP must be **scoped to the component being exported**.
Page-level IX3 interactions are not exported.
When you build IX3 animations in the Designer, attach the trigger to an element inside the component rather than to the page.

### Unsupported actions

Action types that DevLink does not yet support — Lottie, Spline, and Rive — produce a warning during export but do not block the export.
The component exports without those actions; remaining triggers and timelines run as designed.