Exporting componentsDesign guidelines

Interactions

Principles for interactions in Webflow to ensure clean export

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