How to Use the Lottie Element

Lottie Files allow you to add lightweight, high-quality animations to your website, enhancing user engagement while maintaining fast load times. These animations are ideal for buttons, loaders, hero sections, and call-to-action areas.

1. Adding the Lottie Element

Step 1: Insert the Lottie Element

1. Open the page editor.
2. Go to Add Elements → Locate Lottie under the media section.
3. Drag and drop it onto your page.

By default, a placeholder animation will appear.

2. Uploading a Lottie Animation

There are two ways to add a Lottie animation:

Option 1: Using a Lottie File URL

1. Visit LottieFiles.com and log in (free account required).
2. Browse and select an animation.
3. Click "Lottie Animation URL" and copy the link.
4. Go back to the page editor, click on the Lottie element, and paste the URL in the Lottie Link field.
5. The animation will update instantly.

Option 2: Uploading a JSON File

1. On LottieFiles.com, select an animation.
2. Click "Download" and choose "Lottie JSON".
3. In the page editor, click the Upload JSON button.
4. Select the downloaded JSON file, and the animation will appear.

3. Customizing the Lottie Animation

Step 3: Animation Settings

Click on the Lottie element and adjust the following settings:

• Renderer
• SVG (default) – Best for sharp, high-quality visuals.
• Canvas – Smoother performance for complex animations.
• Autoplay
• Enabled: The animation plays when the page loads.
• Disabled: The animation only plays when triggered (e.g., via hover or scroll).
• Loop
• Enabled: The animation continuously repeats.
• Disabled: The animation plays only once.
• Reverse
• Flips the animation’s direction.
• Speed
• Adjust how fast the animation plays (default: 1x speed).

4. Optimizing for Responsive Design

Step 4: Adjusting Size & Placement

• Resize the Lottie element by dragging the corners or setting pixel/percentage dimensions.
• Use alignment settings to position the animation left, center, or right.

Step 5: Optimizing for Mobile & Tablet

• Check responsive views (tablet & mobile) to ensure proper sizing.
• Adjust the Lottie file’s size, placement, or visibility for smaller screens.

5. Why Use Lottie Animations?

• Lightweight & Fast – Loads faster than GIFs while maintaining high quality.
• Interactive & Engaging – Captures user attention.
• Customizable – Adjust speed, looping, and trigger settings.
• Works on All Devices – Fully responsive for desktop, tablet, and mobile.

The Lottie Element is a simple yet powerful way to add stunning animations to your website with minimal effort!