Component ExportDesign Guidelines

Interactions

Principles for interactions in Webflow to ensure clean export

Webflow interactions are JavaScript-powered animations and transitions. Most interactions are supported in Exported Components. See the [#page-interactions] section for more details on specific limitations.

Enabling interactions

To enable interactions in your Exported Components, you need to wrap your application in the DevLinkProvider component.

app/layout.tsx
1import { DevLinkProvider } from '@/devlink/DevLinkProvider';
2import '@/devlink/global.css';
3
4export default function RootLayout({
5  children,
6}: {
7  children: React.ReactNode;
8}) {
9  return (
10    <html lang="en">
11      <body>
12        <DevLinkProvider>
13          {children}
14        </DevLinkProvider>
15      </body>
16    </html>
17  );
18}

Page interactions

Webflow components support page triggers with a limitation: DevLink only exports the first page interaction. If a component uses multiple page interactions across different pages, DevLink will only export the first one.

GSAP-powered interactions

GSAP-powered interactions aren't supported in Exported Components.

GSAP-powered interactions aren’t supported in Exported Components.