# Your first animation Find a free animation, insert it into Webflow, and verify it on a published site. Use a simple, single-animation Lottie for this first workflow. It follows Webflow's native Lottie path and avoids custom-code or advanced dotLottie setup. ## 1. Choose the destination Open the page where the animation should appear. Add or select a Div block or another suitable page element near the intended location. ## 2. Find an animation 1. Launch LottieFiles from **Apps**. 2. Stay in **Explore**. 3. Search by purpose, such as `loading`, `success`, or `scroll`. 4. Open a free result and play the complete preview. Explore search results for a free animation in Webflow ## 3. Add it to the page Keep the default renderer, transparent background, loop, and speed for this first test. Confirm the destination element is selected, then select **Insert animation**. The app creates a Webflow Asset and inserts a native Lottie element. Locate the new element on the page and in the Navigator, then set its size and layout with Webflow controls. Inserted animation selected on the Webflow canvas ## 4. Preview the site Use Webflow Preview and check the intended breakpoints. Confirm that the animation: - Is visible and not clipped by its parent. - Keeps the expected aspect ratio. - Starts and loops as intended. - Does not block nearby links or controls. ## 5. Publish and verify Publish to the `webflow.io` staging domain first. Open the staging URL in a new browser tab and repeat the playback and responsive checks before publishing to production domains. See [Publishing your site](/en/integrations/webflow/05_insert-and-publish/publishing-your-site) for the production checklist. ## Related - [Previewing and customizing](/en/integrations/webflow/04_prepare/previewing-and-customizing) - [Configuring the player](/en/integrations/webflow/05_insert-and-publish/configuring-the-player)