simple lottie control for webstudio

At a glance

The community member is looking for documentation on how to implement simple Lottie controls in Webstudio, such as click to play, play on specific segments, hover to play, play on scroll into view, and play while scrolling. Another community member suggests that there is no Lottie component in Webstudio, but the Lottie animation can be embedded using the script provided by Lottie. They provide a guide on how to add Lottie animation in an HTML page.

The community members then discuss their attempts to implement Lottie in Webstudio, but they are facing issues with the button not triggering the Lottie animation. They also discuss the possibility of using dependencies to add segment controls, but it's unclear if this is possible in Webstudio.

Useful resources

AAdam Muflihun

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

Join the Webstudio community

simple lottie control for webstudio