# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.lottielab.com/export-and-hand-off/code-export-platforms/web/framer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.