Exporting componentsDesign 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 Page interactions 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 'webflow/DevLinkProvider';
2import 'webflow/css/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 coming soon

Components that rely on GSAP-powered interactions still export, but the animation won’t run yet.