lottiefiles logo webflow logo

Create no-code interactive websites with Webflow and Lotties

Unleash the full potential of motion with 50K+ free Lottie animations in Webflow.

Key Benefits

Native Lottie support Image

Native Lottie support

Directly use Lottie animations created in your favorite design tools or downloaded from the vast libraries at LottieFiles.

Trigger-based animations Image

Trigger-based animations

Parallax, Progress, or Reveal... Have your users awestruck by syncing animation playback with user actions.

Zero lines of code Image

Zero lines of code

Build stunning blogs, portfolios, and more, and enrich them with motion, without a single line of code.

Why Lottie?

Unlock snappy page load speeds Image

Unlock snappy page load speeds

Lotties are 600% smaller than GIFs.

Create flawless responsive designs Image

Create flawless responsive designs

Lotties are limitlessly scalable.

Customize on the fly Image

Customize on the fly

Edit Lotties even after exporting them.

How to add Lotties in Webflow

Step 1

Create your animation in Adobe After Effects and export it as a Lottie using LottieFiles for Adobe After Effects plugin, or simply download your favorite Lottie animation from LottieFiles.

Step 2

Drag and Drop or upload the Lottie of your choice to Webflow. You can position the animation on the grid to best suit the aesthetics of your web page.

Step 3

Set up a trigger for your animations to play. Choose what kicks off the magic of motion in your designs - a click, scroll, hover, or more. Grab the user's attention with micro-interactions.

Lotties for you

Start building your Webflow websites quickly.