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 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

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