# How to add Lottie JSON and dotLottie animation files on Framer *By LottieFiles · June 1, 2023* Create an amazing animated website with just a few clicks. --- If you've ever dipped your toes into Framer, you know how powerful of a tool it is! It allows us to bridge the gap between design and development. This dynamic platform enables designers to create polished prototypes and implement them into published websites, simplifying the workflow without developers. Speaking of dynamic, let us dive into the topic of animations. Today, animations are more than just a nifty tool or a quirky add-on. There is a compelling reason why we tend to animate our website or prototypes: - **Create engaging designs:** By conveying a story, setting a mood, or providing a meaningful message, animation allows us to bring a strong emotional connection with our audience. - **Create realistic prototypes:** Provides a preview of how the final website or app looks like, aiding clear communication with stakeholders and minimizing potential issues. Thanks to the capabilities of Framer and Lottie animation, we can now add high-quality, lightweight, and scalable animations to our websites. In this blog, we will explore how to seamlessly integrate Lottie animations into your Framer websites and discover optimization techniques for enhancing your animations even further. ## **Framer plugin for Lottie and dotLottie** The collaboration between Framer and LottieFiles has unlocked exciting new possibilities for incorporating animations into your designs. With recent [updates](https://www.framer.com/updates/dotlottie-component), users can now seamlessly embed both [Lottie](https://www.framer.com/plugins/lottie) JSON format and dotLottie files format into their Framer designs! ![](https://blog-cdn.lottiefiles.com/2023/05/Framer-plugin-for-Lottie-and-dotLottie-1.png) Lottie files are JSON-based (.json) animations that can seamlessly sprinkle motion magic into your designs. Compact yet powerful, they bring a whole new dimension to websites and high-quality prototypes. On the other hand, dotLottie, an open-source file format (.lottie), allows users to bundle several Lottie files and related resources into a single, neat package. It's designed to streamline distribution, enhancing efficiency, and ease of use. The main difference between dotLottie and Lottie JSON is their file sizes - dotLottie files are much smaller, making them a more compact choice. ## **How to add animations to Framer** - Open a new or exciting project on the Framer canvas. - Click the **Insert** button in the top navigation. - Press the **Media** button to find the animation components. - Insert a **Lottie** or **Dot Lottie** component into the project. ### **Uploading the animation** If you prefer to insert the animation using a URL, simply follow these steps: - Head over to your LottieFiles platform. - Select the animation of your choice. - Select the **Handoff & Embed** and **Enable Asset Link.** - Choose a file format using the **Asset link format** dropdown. - Copy the URL from the **Asset link.** - Paste it on the **URL** into the **Source** section. One of the major advantages of utilizing the URL feature is the seamless integration with our LottieFiles platform, where your animations are hosted. This means any edits you or your team make to the animation directly on the platform will automatically be reflected in your Framer project. It eliminates the need for repeated re-uploads and ensures your designs are always up-to-date. Alternatively, you can upload your animation straight to the Framer canvas - Click on the **Upload** option and select **Choose File**. - Navigate to the location of your file and select it. And voilà! Your animation is now your animation is ready to capture the attention of your audience. ## **Get creative!** The Lottie and dotLottie components consist of a range of customizable options that allows you to fine-tune your animations, ensuring they perfectly complement your website. By adjusting these settings, you gain control over the animation playback behavior, allowing you to align it with your unique design aesthetic and style. This includes: Lottie dotLottie File format supported .json .lottie Playing / Autoplay: Choose whether the animation starts playing automatically or needs user interaction to start yes yes Background: Change the color of the animation background no yes Direction: Play animation forward or in the reverse direction yes yes Hover: Animation plays when the cursor hovers over it no yes Speed: Adjust the playback speed of the animation yes yes Progress: Select the starting frame of the animation yes yes Check out this video to learn how you added a Lottie JSON on Framer and played with the setting to add a hover effect on a simple button: [Embedded content](https://www.youtube.com/embed/zhLnnHEmnmI?feature=oembed) Want more inspiration? Here is another video showcasing how we add dotLottie on Framer to create this fun and interactive animated character on our webpage. [Embedded content](https://www.youtube.com/embed/1wCT57B_HeM?feature=oembed) We hope this has inspired you to try adding animation to your websites, even if you don’t know anything about motion design. Start by playing around with the [thousands of free animations](https://lottiefiles.com/featured) on LottieFiles – we can’t wait to see what you come up with! Want more motion inspiration? Check the outcome of the [best types and techniques to use on web designs](https://lottiefiles.com/blog/design-inspiration/animation-type-and-techniques-in-web-design), or browse all our video tutorials on our [Education Center](https://lottiefiles.com/education?utm_medium=web&utm_source=navigation-education)! --- ## Related Articles - [How to Create Animations with AI Using Lottie Creator WebMCP](/blog/working-with-lottie-animations/how-to-create-animations-with-ai-using-lottie-creator-webmcp) - [How to Build Your First Lottie Creator Plugin: Create and Animate a Rectangle](/blog/working-with-lottie-animations/how-to-build-lottie-creator-plugin-create-and-animate-a-rectangle) - [How to Develop and Publish a Plugin for Lottie Creator](/blog/working-with-lottie-animations/how-to-develop-and-publish-a-plugin-for-lottie-creator) - [How to Publish a Lottie Creator Plugin to Extensions](/blog/working-with-lottie-animations/how-to-publish-a-lottie-creator-plugin-to-extensions)