> For the complete documentation index, see [llms.txt](https://docs.lottielab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lottielab.com/export-and-hand-off/code-export-platforms/web/framer.md).

# Framer

## Static Lottie in Framer

Add a non-interactive Lottie animation using Framer’s built-in tools.

1. Use Framer’s Lottie component. Replace the source with a CDN link or uploaded Lottie file.

   <figure><img src="/files/5K4IBfdup2HdnQRvlVac" alt=""><figcaption><p>Default Lottie component in Framer.</p></figcaption></figure>

## Interactive Lottie with Custom Interactions in Framer

Create an interactive Lottie with Framer-specific custom interactions.

1. Open the Lottielab Plugin in Framer.

   <figure><img src="/files/5KPtPlc9xuMdfGFA5xVG" alt=""><figcaption><p>Searching for the Lottielab plugin in Framer.</p></figcaption></figure>
2. Paste the Lottie JSON URL into the plugin.

   <figure><img src="/files/ngTGRrYvnqVoRdW4i88e" alt=""><figcaption><p>Pasted the JSON URL in the plugin.</p></figcaption></figure>
3. Access available states, wrap the Lottie in a Frame, and convert it to a component.

   <figure><img src="/files/m7WWv0fKTy7RPPEp4Zkr" alt=""><figcaption><p>Viewing available states.</p></figcaption></figure>
4. Add custom interactions via Framer’s variants.

   <figure><img src="/files/fQ0IdiM6UVbNffvKCZQZ" alt=""><figcaption><p>Setting Framer interactions after wrapping the Lottie in a Frame and converting it to a component.</p></figcaption></figure>

<mark style="color:purple;background-color:purple;">**Note:**</mark> <mark style="color:purple;background-color:purple;"></mark><mark style="color:purple;background-color:purple;">Plans for v2 of the Lottielab Plugin will integrate "</mark>[<mark style="color:purple;background-color:purple;">**Import a Lottie with pre-built Lottielab interactions**</mark>](#pre-built-lottielab-interactions-in-framer)<mark style="color:purple;background-color:purple;">" into this workflow, simplifying the process.</mark>

## &#x20;Pre-built Lottielab interactions in Framer

Import a Lottie with pre-built Lottielab interactions.

1. Copy the Lottielab component and paste it into Framer. \
   \&#xNAN;**\[Copy from here:** [**Lottielab Component**](https://www.lottielab.com/framer-component)**]**&#x20;

   <figure><img src="/files/QuFmnDa6BgC0mmIjBUGg" alt=""><figcaption><p>Copied the Framer component</p></figcaption></figure>
2. Insert the Lottie JSON URL as the component’s source.

   <figure><img src="/files/5rbFuUSDgQS9xH63gckn" alt=""><figcaption><p>Pasted the component in Framer and selected the component then pasting in the JSON URL</p></figcaption></figure>
3. Enjoy the interactive Lottie with preserved Lottielab interactions.