Hey 馃憢
Issue #2645 mentions Lottie/Rive compatibility in the context of the scroll animation engine. This is a separate, complementary proposal: a standalone LottiePlayer component in sdk-components-react, similar to the existing YouTube and Vimeo components.
Lottie animations (JSON or .lottie files) are a common design asset, lightweight vector animations exported from After Effects, widely used for loaders, hero illustrations, and micro-interactions. Right now, integrating them into Webstudio requires a custom HTML Embed with manually written script injection.
I wrote an article documenting that workaround:
How to add lottie files / json animation in webstudio
It works, but it's too technical for most users.
Proposed component
A LottiePlayer component with the following props:
| Prop |
Type |
Default |
Description |
src |
string |
required |
URL to a .json or .lottie file |
autoplay |
boolean |
true |
Start playing on load |
loop |
boolean |
true |
Loop the animation |
speed |
number |
1 |
Playback speed multiplier |
direction |
1 | -1 |
1 |
Play forward or in reverse |
Implementation sketch
- Package:
packages/sdk-components-react
- Runtime dependency:
lottie-web npm package (no external CDN)
- Builder canvas: renders a placeholder, no animation running, consistent with how YouTube/Vimeo behave on canvas
- Published site: client-only rendering via
useEffect, SSR-safe placeholder
Relation to #2645
This component could later serve as the integration point for the scroll-driven Lottie compatibility mentioned in #2645 (getComputedTiming().progress -> lottie goToAndStop(frame)), but it's independently useful without that.
Curious to know if this fits the roadmap, and if there are preferences on the library side (lottie-web vs @lottiefiles/dotlottie-web).
Hey 馃憢
Issue #2645 mentions Lottie/Rive compatibility in the context of the scroll animation engine. This is a separate, complementary proposal: a standalone
LottiePlayercomponent insdk-components-react, similar to the existingYouTubeandVimeocomponents.Lottie animations (JSON or
.lottiefiles) are a common design asset, lightweight vector animations exported from After Effects, widely used for loaders, hero illustrations, and micro-interactions. Right now, integrating them into Webstudio requires a custom HTML Embed with manually written script injection.I wrote an article documenting that workaround:
How to add lottie files / json animation in webstudio
It works, but it's too technical for most users.
Proposed component
A
LottiePlayercomponent with the following props:srcstring.jsonor.lottiefileautoplaybooleantrueloopbooleantruespeednumber1direction1 | -11Implementation sketch
packages/sdk-components-reactlottie-webnpm package (no external CDN)useEffect, SSR-safe placeholderRelation to #2645
This component could later serve as the integration point for the scroll-driven Lottie compatibility mentioned in #2645 (
getComputedTiming().progress-> lottiegoToAndStop(frame)), but it's independently useful without that.Curious to know if this fits the roadmap, and if there are preferences on the library side (
lottie-webvs@lottiefiles/dotlottie-web).