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. Перейти к Добавить элементы → Locate Лотти 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. Нажмите "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. Нажмите "Download" and choose "Lottie JSON".
3. In the page editor, click the Upload JSON button.
4. Выберите 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.
• Автовоспроизведение
• 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.
• Скорость
• 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.
• Использовать 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.
• Настраиваемый – 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!