Join the Webstudio community

Updated 2 weeks ago

simple lottie control for webstudio

Hi Guys, is there a documentation for doing simple lottie control for webstudio? I can't really figure it out reading the documentation from lottie site
such as:

Click to play
click to play on specific segment
hover to play
play on scroll into view
play while scrolling

8 comments

JJohn Siciliano

Hey there isn't a Lottie component at this time but you can embed it using the script they provide. For specific interactions, I'd look for guides or ask AI. Here's a light guide about using it in HTML as you'd paste the embed into an HTML embed https://lottiefiles.com/blog/working-with-lottie-animations/how-to-add-lottie-animation-in-web-page-html

AAdam Muflihun

so I figured it out

https://gtkc6p.csb.app/

ws mobile: https://marketing-audit.wstd.io/

it works on codesandbox
but when adding on webstudio it's not triggering the button though, any idea?

AAdam Muflihun

I tried it here, it doesn't trigger the lottie as well

https://marketing-audit.wstd.io/lottie

JJohn Siciliano

looks like buttonmenu class isn't present. Also no need for jquery

AAdam Muflihun

I found the click, but do you know how to add a segments there?

AAdam Muflihun

I think the segments only works when doing it with dependency

AAdam Muflihun

is it possible to install dependency on webstudio?

JJohn Siciliano

Many libs support ES module imports. Whether or not it works depends on the package and if it has it's own dependencies (I think). I've never done this but seen it out in the wild

Eg

Plain Text

<script type="module">
  import axios from 'https://cdn.skypack.dev/axios';
  axios.get('https://api.example.com').then(response => console.log(response.data));
</script>

Add a reply

","upvoteCount":0,"dateCreated":"2025-01-20T02:17:03.355Z","datePublished":"2025-01-20T02:17:03.355Z","dateModified":"2025-01-20T02:17:11.395Z","url":"https://help.webstudio.is/simple-lottie-control-for-webstudio-MNzyzynFTp3K#9e7b83bd-e348-4afd-aa37-5c7ca6ecb4ff","author":{"@type":"Person","url":"https://help.webstudio.is/members/a3a85f00-1132-4262-8176-1ff92ab9d883","name":"John Siciliano","identifier":"a3a85f00-1132-4262-8176-1ff92ab9d883","image":"https://cdn.discordapp.com/avatars/1141467296532009071/8c83067a661d2916bfb8be5a37677463.webp?size=256"}}]}}