# Your first animation
Find a free animation, insert it into Framer, and verify it on a published site.

Use a simple, single-animation file for this first workflow. Save themes, state machines, and multi-animation bundles for later.

## 1. Choose the destination

Open the page where the animation should appear. Select a Frame if the new component should be nested and centered inside that frame.

## 2. Find an animation

1. Open LottieFiles from **Plugins**.
2. Stay in **Explore** and select **Free animations**.
3. Search by purpose, such as `loading`, `success`, or `scroll`.
4. Open a result and play the complete preview.

<Image src="https://assets.docs.lottiefiles.com/static/1b095277e9-640.webp" alt="Explore search results in Framer" caption="Explore search results in Framer" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/1b095277e9-640.webp 640w, https://assets.docs.lottiefiles.com/static/1b095277e9-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/1b095277e9-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAfElEQVR4nGPwiUj+7xWW+H/WohX/z168+n/esjX/PcMS//tGpvz3Dk/6ywBTcPLMuf8gcOb8pf+eoQn/QeIgDFbgHZ70/+DhY/////73f//hk2ANKAq8wpP+Hz9xCmzCoeNYFIBMmLNw1f9jh0/8nzZv/n/vcIikd0TyHwCKmWSieDoHPAAAAABJRU5ErkJggg==" />

## 3. Insert it

Keep the default renderer, transparent background, loop, and speed for this first test. Select **Insert animation**.

The plugin adds a LottieFiles player component, selects it, and moves the Framer viewport to the result. Resize and position the component with Framer's canvas controls.

<Image src="https://assets.docs.lottiefiles.com/static/52a007f651-640.webp" alt="Animation preview and the inserted player in Framer" caption="Animation preview and the inserted player in Framer" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/52a007f651-640.webp 640w, https://assets.docs.lottiefiles.com/static/52a007f651-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/52a007f651-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlElEQVR4nCWMPQuCYBhF3//bH2htiL4QkoKiaIlqsKEf0BY1OQUO0WJIUZiE5EcW7+MJ9cK9Z7hwVKNrYh8dtrsDvcGEdn9E0xiW7JhjUXNrA8mPLE6QHChbTBU1W1roICIMXogIYfTB927o5IuWHLUoDECcpojWpeA+XfO23cpQbxk4Vw/36SNAdvY51VY89pfi13/7U4zNvq22rAAAAABJRU5ErkJggg==" />

## 4. Preview the page

Open Framer Preview and test the page at the intended desktop and mobile widths. Confirm that the animation:

- Is visible and not clipped by its parent frame.
- Keeps the expected aspect ratio.
- Starts, loops, and responds as intended.
- Does not block nearby links or controls.

## 5. Publish and verify

Publish to the generated `framer.app` domain or your team's staging environment. Open the published URL in a new browser tab and repeat the playback and responsive checks.

Publishing is complete only after the live result behaves correctly. See [Publishing your site](/en/integrations/framer/05_insert-and-publish/publishing-your-site) for the production checklist.

## Related

- [Previewing and customizing](/en/integrations/framer/04_prepare/previewing-and-customizing)
- [Configuring the player](/en/integrations/framer/05_insert-and-publish/configuring-the-player)