Skip to content

Latest commit

 

History

History
58 lines (48 loc) · 2.34 KB

walkthrough.md

File metadata and controls

58 lines (48 loc) · 2.34 KB

Walkthrough - Lottie Fixes & Features

Overview

We identified and fixed compatibility issues in lottie.json and added new interactive features to the Lottie Viewer.

Project Structure

  • js/: Modularized application logic (ES Modules).
    • main.js: Entry point.
    • player.js: Lottie player logic.
    • layers_*.js: Layer management.
    • analyze.js, fix.js, export.js: Tools.
  • json/: Lottie animation files.
  • index.html & style.css: The Viewer UI.
  • server.js: Local development server (Required).

Features Added

1. File Browser Sidebar [NEW]

A new sidebar on the left lists available JSON files.

  • Dynamic Access: The viewer connects to the local server to see files in real-time.
  • Refresh Icon: A refresh button updates the list without reloading the page.

2. Layer Color Picker

  • Functionality: Allows realtime tinting of Shape, Text, Precomp, and Solid layers.
  • Smart Detection: automatically detects and displays the current color of the layer.
  • Target: Updates the fill and stroke of all SVG elements inside the layer or group.

3. Analysis & Auto-Fix Tools

  • Analyze Button: Scans the current animation for compatibility issues.
  • Fix Button [NEW]: Instantly fixes common issues in the currently loaded animation (in-memory).
    • Removes Expressions (which cause crashes).
    • Removes Merge Paths (unsupported on Android).
    • Removes/Converts Effects (unsupported).
  • Workflow: Load -> Analyze -> Fix -> Download.

4. JSON Export

  • Download Button: Downloads the current state of variables (fixed/modified) as a new JSON file.

Verification

Important

Running the Application: You must run the server to view the app.

  1. Open Terminal.
  2. Run: node server.js
  3. Open Browser: http://localhost:8000
  1. Load File: Select lottie.json.
  2. Analyze: Click "Analyze". Note the errors.
  3. Fix: Click the green "Fix" button.
    • Confirm the prompt.
    • An alert will show what was fixed.
    • The player reloads automatically.
  4. Re-Analyze: Click "Analyze" again. Errors should be gone.
  5. Download: Click "Download" to save the _exported.json version.

Deliverables

  • json/lottie_fixed.json: The patched file.
  • server.js: Development server.
  • js/script.js & style.css: Updated viewer.