# 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="https://1768268082-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhgGiOKJySIZ4fBeXk0CD%2Fuploads%2F6TWOfArBOHUq6H9dpc3x%2Fimage.png?alt=media&#x26;token=2681f2f8-c071-4f3b-9f43-d1f872eb1ab3" 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="https://1768268082-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhgGiOKJySIZ4fBeXk0CD%2Fuploads%2FNwufgeQxk3YzhEliwK1B%2Fimage.png?alt=media&#x26;token=953b1d29-8e08-4df3-9c83-7f10569a72cd" 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="https://1768268082-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhgGiOKJySIZ4fBeXk0CD%2Fuploads%2Fidgus1FK8RF40Nmm8kIJ%2Fimage.png?alt=media&#x26;token=8fa16f6e-6e6f-4b6e-8973-ff4dc9ab4b93" 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="https://1768268082-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhgGiOKJySIZ4fBeXk0CD%2Fuploads%2FMNGTB3wllYhDdVM4wA1b%2Fimage.png?alt=media&#x26;token=61c354b7-5728-4b0e-a42f-b8e36c6cf980" alt=""><figcaption><p>Viewing available states.</p></figcaption></figure>
4. Add custom interactions via Framer’s variants.

   <figure><img src="https://1768268082-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhgGiOKJySIZ4fBeXk0CD%2Fuploads%2FrSqUFdG3nnexf7dOVsBo%2Fimage.png?alt=media&#x26;token=2de7e85f-8300-43bc-81d7-4c3627477530" 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="https://1768268082-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhgGiOKJySIZ4fBeXk0CD%2Fuploads%2FSJw45uheHLvQYw10PzaB%2Fimage.png?alt=media&#x26;token=fa3bab57-b41f-4629-84f7-e6561722103e" alt=""><figcaption><p>Copied the Framer component</p></figcaption></figure>
2. Insert the Lottie JSON URL as the component’s source.

   <figure><img src="https://1768268082-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhgGiOKJySIZ4fBeXk0CD%2Fuploads%2FKta8Bu0VIn6bjw5IlAsN%2Fimage.png?alt=media&#x26;token=f172d8ad-8cbc-46a6-adde-0be0d15ba507" 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.