Lottieflow

The native Lottie element accepts JSON animation files, so teams still need a source for those files. That typically means using After Effects with the Bodymovin plugin or commissioning custom motion design work. If your team doesn't have animation production resources, that gap can leave Lottie support underused.

Lottieflow fills that gap with a free, categorized library of downloadable Lottie JSON files built for Webflow. Many one-color files include a hex color picker, and each download includes a choice between two easing variants designed around the Interactions panel. You download a JSON file, upload it to your Assets panel, and control playback through native interaction triggers like scroll, hover, click, and page load.

Designers building client sites with motion, SaaS marketers adding animated CTAs and scroll-driven product demos, and freelancers who need production-ready UI animations without a motion design toolchain get the most from this integration. Agency teams working across multiple client projects can match brand colors at download time.

How to integrate Lottieflow with Webflow

What is Lottieflow? Lottieflow is a free Lottie animation asset library created by Finsweet and built specifically for Webflow. It gives you a free library of downloadable JSON animation files across 21 categories, including arrows, CTAs, loading indicators, menu navigation icons, and scroll prompts. Each animation offers a choice between two easing variants before download, and one-color animations support real-time hex color customization.

Use Lottieflow alongside the native Lottie element when you need ready-made UI animations without producing custom motion files. The typical workflow starts on Finsweet's site, where you customize color and easing, then moves into your project for file upload, element placement, and trigger configuration. Because Lottieflow outputs standard JSON files that map directly to the built-in Lottie element, you don't need any third-party scripts or plugins for standard use.

You can use the native Lottie element to download, upload, and trigger animations without writing code, or use Code Embed elements to bind different Lottie animations to CMS items, which the native Lottie element cannot do on its own.

Most implementations use the native Lottie element. The Code Embed approach works as a workaround for CMS-driven use cases.

Download and add animations with the native Lottie element

Lottieflow's primary integration path requires no code, no scripts, and no marketplace app installation. You download a JSON file from the Lottieflow library, upload it to the Assets panel, and configure playback through the Interactions panel. The standard JSON upload workflow works on the free Starter plan. Finsweet provides a 27-video YouTube tutorial playlist covering every animation category and trigger type, plus a cloneable Webflow project with live implementation examples.

[image placeholder]

To download and customize your animation:

1. Go to finsweet.com/lottieflow/explore and browse by category or search across all 21 categories.
2. Click any animation to open its download page, which typically includes a live preview, frame-by-frame timeline slider, duration, and file size.
3. Log in with your free Lottieflow account (required once, free forever).
4. Enter a hex color value to preview your brand color on one-color animations.
5. Choose your easing variant: pick Ease-y if you want professional animator easing baked into the file, or Linear if you want a clean file where you control all easing through Interactions.
6. Click Download to save the .json file to your computer.

Picking the wrong easing combination creates double-easing. If you download the Ease-y variant, set the Interactions easing to Linear so the two don't stack. If you download the Linear variant, apply any easing you want inside the Interactions panel. Finsweet's Ease-y vs. Linear tutorial explains this in detail.

To add the animation to your site:

1. Open the Assets panel in the left toolbar (cloud icon) and upload your .json file, or drag it directly from your desktop into the panel.
2. Open the Add panel (the + icon), go to the Media section, and drag the Lottie animation element onto your canvas.
3. Click the Lottie element on the canvas, then click Replace Lottie sequence in the element settings panel and select your uploaded JSON file.
4. Configure playback settings: toggle Loop for continuous playback, toggle Play in reverse for backward playback, and choose between SVG rendering (crisp vector scaling) or Canvas rendering (better performance for complex animations).

Once you connect the file, the Lottie element plays the animation on page load by default. Animations placed below the fold will have already played before visitors scroll to them. Add a scroll into view interaction trigger or enable looping to make below-fold animations visible. The Lottie documentation covers this default behavior.

Set up interaction triggers

All trigger logic lives in the Interactions panel (the lightning bolt icon in the right toolbar). Lottieflow has no trigger system of its own. The Interactions panel supports multiple trigger types for Lottie playback, and each trigger type maps to specific use cases in the Lottieflow library.

To add a mouse click trigger:

1. Select your Lottie element on the canvas.
2. Open the Interactions panel (⚡ icon in the right toolbar).
3. Click + next to Element trigger and choose Mouse click (tap).
4. Click Select an action and choose Lottie playback under the Integrations section.
5. Configure delay, reverse, or loop options as needed.

This trigger works well with Lottieflow's Checkbox, Radio, and CTA animation categories. The Arrow icon click tutorial walks through this setup.

To add a mouse hover trigger:

1. Select the Lottie element and open the Interactions panel.
2. Under Element trigger, select Mouse hover.
3. For hover-in, set the action to Lottie playback.
4. For hover-out, add another Lottie playback action and enable reverse.

Hover triggers pair well with arrow icons, social media icons, and CTA animations. See the Arrow hover tutorial for a walkthrough.

To add a scroll-into-view trigger:

1. Apply the Scroll into view interaction to the parent container of the Lottie element, not to the Lottie element itself.
2. Set the parent element's height to control playback speed, since a taller parent produces slower scrubbing as the user scrolls.
3. If you use sticky positioning, set the top distance value explicitly or the animation will behave incorrectly.

Applying the scroll trigger directly to the Lottie element instead of its parent container is the most common setup mistake. The Background icon scroll tutorial shows the correct approach.

The Interactions panel also supports mouse click, mouse hover, page load, scroll into view, while-scrolling, while-page-scrolling, dropdown-opens, nav-opens, and on-form-submit triggers for Lottie playback. The full set of supported triggers and their corresponding tutorials:

• Mouse click: Arrow click tutorial
• Mouse hover: Arrow hover tutorial
• Scroll into view: Arrow scroll tutorial
• While scrolling: Attention scrolling tutorial
• Page load: Attention page load tutorial
• While page scrolling: Scrolling icon tutorial
• Dropdown opens: Dropdown tutorial
• Nav opens: Menu nav tutorial
• On form submit: Success icon tutorial (the only trigger type that requires a custom code step, covered at timestamp 03:05)

The form submit trigger needs custom code beyond the visual Interactions panel.

Add CMS-driven Lottie animations with Code Embed elements

The native Lottie element cannot bind directly to CMS URL fields. If you need different animations on each CMS collection page — for example, unique loading animations per portfolio project or category-specific icons on a blog — you need a workaround using the LottieFiles web player component.

This workaround relies on custom code embeds and dynamic bindings, so you need a paid plan; the free Starter plan does not support this method. Standard Lottieflow usage — uploading a JSON file and using the native Lottie element with Interactions — works on the free Starter plan.

To set up CMS-driven Lottie animations:

1. Upload your Lottieflow JSON files to the Assets panel and copy each file's published URL.
2. In your CMS Collection, add a URL field (for example, name it "Lottie Link").
3. Paste each animation's asset URL into the URL field for the corresponding CMS item.
4. On your CMS Collection Template page, drag an Embed element onto the canvas where you want the animation to appear.
5. Inside the Embed, add a <lottie-player> web component with the src attribute bound to your CMS URL field using the purple dynamic binding icon:

<lottie-player src="[CMS URL field]" background="transparent" loop autoplay></lottie-player>

6. Add the LottieFiles player <script> tag to your site-level custom code settings. You only need this step for CMS-driven animations using this workaround; standard Lottieflow usage requires no script. Grab the current script tag from LottieFiles documentation before implementing, since the CDN URL may change.

The Lottie animation in CMS dynamic pages cloneable project by Daria Mulova shows this approach with speed, loop, and reverse loop settings configured per CMS item. It is the main exception to Lottieflow's otherwise no-code workflow.

Manage Lottie assets with the Data API

If you need to programmatically upload, organize, or manage Lottie animation files across multiple sites, the Data API gives you a developer path for working with site assets. Lottieflow itself has no API, so this section covers a Data API workflow rather than a Lottieflow-native integration. It requires server-side development and fits best for agencies managing animation libraries at scale or developers building internal tools for content teams.

Relevant API resources include:

• The Assets API uploads, lists, updates, and deletes Lottie JSON files as site assets
• Asset Folders sub-endpoints support organizing Lottie files into folders and filtering by folderId
• The Custom Code API supports injecting player scripts programmatically on specific pages or site-wide

Lottie files upload as application/json MIME type through a two-step process.

Upload Lottie files via the Assets API

The asset upload process uses presigned S3 credentials returned by the Data API.

To upload a Lottieflow JSON file programmatically:

1. Call POST /v2/sites/{site_id}/assets with the fileName (including .json extension) and fileHash (MD5 hash of the file contents). The API returns presigned S3 upload credentials.
2. Post the file directly to S3 using the returned credentials.
3. Verify the upload by calling GET /v2/sites/{site_id}/assets to confirm the file appears in your site's asset list.

Both API calls need the assets:write scope on your API token. The Create Asset endpoint documentation covers the full request and response schema. This API route is optional and mainly relevant if you're managing Lottie assets across sites at scale.

What can you build with the Lottieflow integration?

Integrating Lottieflow with Webflow lets you add production-ready motion to UI elements, page transitions, and content sections without After Effects or custom animation work.

• Animated navigation menus: Replace static hamburger icons with animated menu-open and menu-close transitions triggered by the navbar interaction. Lottieflow's Menu Nav category includes multiple hamburger animation styles that match your brand color through the hex picker. The Menu Nav Pack live example shows several variations.
• Scroll-driven product storytelling: Build landing pages where animations advance frame-by-frame as visitors scroll. Place a Lottieflow Background or Scrolling animation inside a tall parent container with a while-scrolling trigger to create a product reveal sequence that responds to scroll position.
• Interactive form feedback: Show an animated success confirmation when a visitor submits a form. Lottieflow's Success category provides animated checkmarks and celebration icons that trigger on form submission. This gives visitors immediate visual feedback instead of a static thank-you message.
• Page preloaders with brand animation: Use Lottieflow's Loading category to create a branded loading state that plays while page assets load. Set the animation to play on page load and configure it to loop until the page is ready. This can hold attention during initial render.

If you need more control over CMS-driven animations, the workaround and API path above cover those cases.