Overview

Astro Lottie brings the power of Lottie animations to your Astro website, enabling an engaging and dynamic user experience. With easy installation and seamless integration, you can enhance your site’s visuals by implementing impressive animations effortlessly. Whether you want to attract user attention or add a playful touch, Astro Lottie allows you to implement animations that elevate your website’s overall appeal.

Getting started with Astro Lottie is straightforward, requiring the setup of a few configurations in your astro.config file. Once installed, you are equipped to import Lottie components, customize their properties, and utilize them throughout your pages. The combination of type support and straightforward usage makes it a valuable tool for developers looking to inject charm into their designs.

Features

• Type Support: The integration defines an astroLottie global object, offering full typing info and enabling type checking for seamless use in your components.

• Component Importing: Easily import the Lottie component inside your Astro pages or components, complete with props autocompletion for improved development efficiency.

• Flexible Styling: Utilize a parent div as a container to set size and style, either through inline styles or CSS classes, to match your design needs.

• Asynchronous Loading: The Lottie player is fetched asynchronously, loading only when a page contains animations, which helps optimize performance.

• Dual Player Options: Choose between a small “light” player for basic SVG rendering and a full-featured player that supports all capabilities of Lottie animations.

• Efficient Animation Management: Automates the checking and loading of Lottie animations, ensuring that if used multiple times, they are downloaded only once for better performance.

• Intersection Observer Integration: This feature allows animations to play only when visible on the screen, pausing when they exit, which enhances user interaction and engagement.

• Document Events: Emits events such as astro-lottie-loaded, providing an easy way to determine when all animations are fully loaded and ready to play.