Lottie JSON animations

Question

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

John Siciliano · Answer

you can self host here and theyll give the the embed script https://lottiefiles.com/

mihx · Answer

Thanks! Webstudio does not support uploading custom assets?

John Siciliano · Answer

not json files

John Siciliano · Answer

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

mihx · Answer

Thanks john you re the best

fakebizprez · Answer

I'm doing the same thing right now. Still have no clue how to maek these json lotties larger.

fakebizprez · Answer

I changed the W & H pixels and the graphic shrunk then split in two 😭

John Siciliano · Answer

have a project link i can look at?

The Panwadi Ji · Answer

Just curious. I did not see anything regarding lottie animation on Roadmap as well. Is there a way to pitch this feature?

Oleg Isonen · Answer

no need to pitch, use html embed to embed those

The Panwadi Ji · Answer

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

Oleg Isonen · Answer

so what you want is controlling the external animation with events from canvas

Oleg Isonen · Answer

this is part of animation/interactions engine that doesn't exist in webstudio yet

Oleg Isonen · Answer

you can do that with code though

Oleg Isonen · Answer

lottie and rive have an api, you would need to bind your events and call their apis

Oleg Isonen · Answer

you could also combine gsap with it https://gsap.com/community/forums/topic/38091-using-draggable-to-control-lottie-animation/

The Panwadi Ji · Answer

OMG! Thanks a lot. This is really helpful

Join the Webstudio community

Lottie JSON animations