Skip to content

feat: add LottiePlayer component#5849

Open
vianmora wants to merge 1 commit into
webstudio-is:mainfrom
webstudio-community:feat/lottie-player
Open

feat: add LottiePlayer component#5849
vianmora wants to merge 1 commit into
webstudio-is:mainfrom
webstudio-community:feat/lottie-player

Conversation

@vianmora

@vianmora vianmora commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Closes #5837

Description

Adds a LottiePlayer component that renders Lottie animations from a JSON file URL.

Three behavior modes:

  • loop: continuous playback
  • toggle on click: forward on click, reverse on second click
  • toggle on hover: forward on hover, reverse on mouse out

Also includes:

  • Lottie JSON thumbnail in the asset manager (first frame preview)
  • Extended asset picker (select-asset.tsx) to support any asset type (image, font, video, file) — previously only images were supported; this enables the JSON file picker for the Source prop

Steps for reproduction

  1. Add a LottiePlayer component from the component panel
  2. In Settings, set a Lottie JSON file via the Source picker
  3. The animation plays in loop mode by default
  4. Switch Behavior to "toggle on click": click plays forward, click again reverses
  5. Switch Behavior to "toggle on hover": hover plays forward, mouse out reverses

Code Review

  • hi @kof, I need you to do
    • conceptual review (architecture, feature-correctness)
    • detailed review (read every line)
    • test it on preview

Before requesting a review

  • made a self-review
  • added inline comments where things may be not obvious (the "why", not "what")

Before merging

  • tested locally and on preview environment (preview dev login: 0000)
  • updated test cases document
  • added tests
  • if any new env variables are added, added them to .env file
Enregistrement 2026-07-02 011411 (1)

Adds a new LottiePlayer component that renders Lottie animations
from a JSON URL. Supports three behaviors:
- loop: plays and loops continuously, with optional reverse direction
- toggle on click: click to toggle between open (last frame) and closed (first frame)
- toggle on hover: plays forward on hover, reverses on mouse out

Also supports a controlled mode via the isOpen prop to share state
with other elements.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] LottiePlayer component

1 participant