Join the Webstudio community

Updated 3 months ago

Lottie JSON animations

At a glance

The community members are discussing how to embed Lottie JSON files in Webstudio projects. They suggest self-hosting the JSON files on a platform like LottieFiles, which provides an embed script. However, Webstudio does not support directly uploading custom assets like JSON files. The community members also discuss challenges with resizing Lottie animations and controlling their playback using events and external libraries like GSAP. While Webstudio does not currently have built-in support for Lottie animations, the community members provide workarounds using HTML embeds and custom code.

Useful resources
Hi guys, how can I embed lottie JSON file to my Webstudio projects? As far as I am aware I need to self host the JSON file somewere else? Not possible directly through webstudio? What is th best way to embed something like this: https://iconscout.com/lottie-animation/arrow-up-6899908
2
J
m
f
17 comments
you can self host here and theyll give the the embed script https://lottiefiles.com/
Thanks! Webstudio does not support uploading custom assets?
plus even if you could, you would need to reference the file url in an html embed and that's not recommended because the file URL isnt made available so it may change in the future
Thanks john you re the best
I'm doing the same thing right now. Still have no clue how to maek these json lotties larger.
I changed the W & H pixels and the graphic shrunk then split in two 😭
have a project link i can look at?
Just curious. I did not see anything regarding lottie animation on Roadmap as well. Is there a way to pitch this feature?
no need to pitch, use html embed to embed those
embeding is basic. What about playing it with a button click? Basically adding a way to create motion using click of a button or playing it when we're getting inside the view
so what you want is controlling the external animation with events from canvas
this is part of animation/interactions engine that doesn't exist in webstudio yet
you can do that with code though
lottie and rive have an api, you would need to bind your events and call their apis
OMG! Thanks a lot. This is really helpful
Add a reply
Sign up and join the conversation on Discord