# Lottie animation

Create dynamic, animated sections using Lottie animations from LottieFiles. This section displays a Lottie animation alongside customizable content blocks, giving you full control over animation behavior, positioning, and styling.

### Getting Started

#### Finding and Downloading Lottie Animations

1. Visit [LottieFiles.com](https://lottiefiles.com/featured-free-animations?type=free) to browse free animations
2. Select an animation you like
3. Download the JSON file (see video tutorial for detailed steps)
4. Upload the JSON file to your Shopify Files library: Files
5. Copy the file URL from Shopify
6. Paste the URL into the "Lottie URL" field in the section settings

{% embed url="<https://p197.p4.n0.cdn.zight.com/items/mXuOyqX0/f3ea4f9a-3820-4eb4-9956-bf548b197fc7.mp4?v=b997e53297ae2a7d09ee115b011ed90e>" %}

### Animation Behavior

Control when and how your Lottie animation plays:

* **Animate on scroll**: Animation plays when the section comes into view
* **Animate on page load**: Animation starts automatically when the page loads
* **Animate on hover**: Animation plays when users hover over it
* **Animate on click**: Animation plays when users click on it
* **Match animation with scroll**: Animation progress matches scroll position (seeks through frames as you scroll)

#### Animation Settings

* **Loop animation**: Enable to make the animation repeat continuously (not available for hover, click, or scroll-match modes)
* **Animation speed**: Control playback speed (0.1x to 3x, where 1 is normal speed)

### Layout & Positioning

* **Lottie position**: Place animation on the left or right side of the content
* **Lottie scale**: Adjust size from 0.5x to 2.5x (1 is normal scale)
* **Lottie box width**: Control the container width (20-100% of available space)
* **Lottie box background**: Set a background color for the animation container
* **Lottie box rounded corners**: Add border radius (0-100px)

### Text Content

* **Text alignment**: Left, center, right, or justify
* **Text size**: Adjust from 80% to 150% scale
* **Text box width**: Control content width (30-70% of available space)
* **Text color**: Customize text color
* **Text background**: Add a background color or gradient to the text area

### Design Options

* **Background**: Set section background color or gradient
* **Section size**: Control overall section width (60-100% of screen)
* **Maximum width**: Set a pixel constraint for large screens (e.g., 1200px)
* **Inner padding**: Adjust top and bottom padding (0-100px)
* **Outer margin**: Add spacing above and below the section (0-100px)

### Content Animation

Add entrance animations to your text content blocks (separate from the Lottie animation):

* Fade-in
* Fade-in from left, right, up, or down
* Adjustable animation speed