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.

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