Lottie files are lightweight, animated graphics that can be embedded into websites to add visual interest and motion. Similar to GIFs but more efficient, Lottie animations are ideal for drawing attention to specific areas of a page without compromising performance. You can sign-up for a free account at https://lottiefiles.com/. One note- because LottieFiles is a third-party resource, any troubleshooting issues with these files will need to go through LottieFiles support.
What Are Lottie Files?
Lottie is a file format for rendering animations. These animations can be used across websites, apps, and social media platforms. Lottie files are typically available in JSON format, which allows for scalable, high-quality animations with minimal file size. PLEASE NOTE: The use of too many LottieFiles on a single page can cause performance issues and even prevent the page and possibly the site from functioning properly.
To access Lottie files:
- Visit LottieFiles.com, a popular platform offering both free and premium animations.
- An account is required to download files.
- Other graphic stock sites may also offer Lottie files.
Adding a Lottie File in Brizy
To insert a Lottie animation:
- Open the Add Elements Drawer from the left sidebar.
- Locate the Lottie element.
- Click, hold, and drag the element into the desired location on the page.
A default animation will appear, which can be customized.
Customizing the Lottie Animation
To configure the animation:
- Select the Lottie element to activate its settings.
- In the Options Toolbar on the left, locate the Lottie Link field.
There are two ways to add a Lottie animation:
-
Via URL:
- Copy the animation URL from LottieFiles.com.
- Paste it into the Lottie Link field in Brizy.
- The animation will update instantly.
-
Via JSON Upload:
- Download the animation as a Lottie JSON file from LottieFiles.com.
- In Brizy, click the plus (+) icon on the Lottie element.
- Upload the JSON file to replace the default animation.
Animation Settings
Brizy provides several settings to control how the animation behaves:
- Renderer: Choose between SVG (recommended for clarity) and Canvas (better for smoother performance with complex animations).
- Autoplay: Enables the animation to start automatically when the page loads.
- Reverse: Plays the animation in reverse.
- Loop: Determines whether the animation repeats.
- Speed: Adjusts the playback speed (a value of 1 is standard).
Styling and Responsiveness
Lottie elements can be resized manually using drag handles or by adjusting width and height in the settings. Additional styling options include:
- Background color
- Shadow effects
- Alignment
It is important to preview the animation on tablet and mobile devices to ensure it fits well within the design and maintains performance across screen sizes.
In our Cloud Websites documentation, you may come across the name "Brizy" or links to articles found on the Brizy website. Brizy is a technology partner that helps us provide an enhanced, user-friendly website editing experience. The Brizy partnership is explicitly designed for ministries, ensuring we offer the best solution to meet your church's website needs.
Updated