How to copy an animation/interaction from one Webflow project to another?

To copy an animation or interaction from one Webflow project to another, you’ll need to use Webflow's Client-first / Class-based system or use a workaround like the “copy-paste across projects” feature available in Designer.

1. Use Webflow’s Cross-Project Copy-Paste

• Open both projects in Webflow Designer (in different tabs of the same browser).
• In the source project, select the element (div, button, etc.) that has the interaction (e.g., scroll animation or click trigger) applied.
• Copy the element using Cmd+C (Mac) or Ctrl+C (Windows).
• Switch to the destination project tab and paste (Cmd+V or Ctrl+V) the element into the canvas.
• This will automatically copy associated interactions, styles, and classes into the new project.

2. Detach and Reuse the Interaction

• Once pasted, you can delete the copied element if you don’t need it visually, but keep the interaction in the Interactions panel.
• You can now apply the same animation to other elements in the new project using the “Choose an animation” dropdown in the Interactions panel.

3. Be Aware of Dependencies

• Any custom fonts, global classes, or assets used in the animation must also be manually copied over to avoid missing styles or errors.
• If your animation relies on Symbols or CMS content, make sure those are replicated properly in the target project.

Summary

To copy an interaction from one Webflow project to another, use the cross-project copy-paste feature by duplicating an element with the animation applied. This will bring over the interaction along with the required classes.