# Webflow
Find, prepare, and publish Lottie animations on Webflow sites with the LottieFiles app.

The LottieFiles app for Webflow brings public animations and your team's private LottieFiles Workspace into the Webflow design environment. Find an animation, prepare it for the intended runtime, insert it into the page, and verify the result after publishing.

<Image src="https://assets.docs.lottiefiles.com/static/9ddf3233a9-640.webp" alt="LottieFiles open in Webflow with an inserted animation selected" caption="LottieFiles open in Webflow with an inserted animation selected" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/9ddf3233a9-640.webp 640w, https://assets.docs.lottiefiles.com/static/9ddf3233a9-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/9ddf3233a9-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAjklEQVR4nB3K6wqCMBiA4V1EdCDoYDUXuX2zdJpBSlRaUN3/vRRv4O/nUZfHh6b7UF1biuJEqM7U7Zume1PfXz+V2B1bE2OtI9w6xAtabxgNBkzHQ5QPOSLSgxFHnmcs5jPSpkXnAeUS2wdtdkxma/whsIkiVmXBMstQ1iZ4cdhQo8sn6fGCMTF7L6Tivn+P5D8Omvt+swAAAABJRU5ErkJggg==" />

## The core workflow

1. **Find** an animation in Explore or choose the approved version from Workspace.
2. **Prepare** its background, palette, renderer, theme, child animation, or state machine when needed.
3. **Select** the page element that should receive or anchor the animation.
4. **Insert** a native Webflow Lottie element or an advanced dotLottie player.
5. **Preview and publish** the site, then verify the animation on its public URL.

## Choose a source

- **Explore** is the public LottieFiles library. Use it to discover public animations for a new need.
- **Workspace** contains private and team assets organized into workspaces, projects, collections, and folders. Use it for approved production assets.
- **A local file** should be uploaded to Workspace first. This preserves one reviewable source before the animation enters Webflow.

## What the app adds

Standard Lottie animations are copied into Webflow Assets and inserted as native Webflow Lottie elements. dotLottie v2 files and interactive state machines use a dotLottie web component with page custom code so advanced runtime features survive publishing.

An inserted element is not a live mirror of its Workspace file. When the source changes, review the new version, replace or reinsert the element, and publish the site again.

## Start here

1. **[Quickstart](/en/integrations/webflow/01_quickstart)** - install the app and publish a free animation on a Webflow site.
2. **[Workspace](/en/integrations/webflow/03_workspace)** - use private or team-approved animation assets.
3. **[Insert and publish](/en/integrations/webflow/05_insert-and-publish)** - choose a container, understand the inserted element, and verify the live result.

## Related

- [Prepare an animation](/en/integrations/webflow/04_prepare)
- [Compatibility and limitations](/en/integrations/webflow/06_reference/compatibility-and-limitations)
- [Troubleshooting](/en/integrations/webflow/06_reference/troubleshooting)