Can;t seem to get 'delay' to work with Lottie Interactivity?

1

Hi, wanting to use the delay action mentioned on the how-to page:

  • ‘delay: [time in milliseconds]’: Will delay all interactions and playback of the animation until the delay is finished.
  • ‘speed: [integer]’: Set the speed of the animation, 1 being the default speed.

Not sure what I’m doing wrong or missing?

I can affect the speed using speed=“0.1” in the html within the element, but not as an action in the JS. Delay doesn’t seem to work for me in either HTML or JS.

 <lottie-player id="box3" src="https://assets9.lottiefiles.com/private_files/lf30_c4qw34g9.json" style="width: 300px; height: 300px;" speed="0.1" delay="3000"></lottie-player>

LottieInteractivity.create({
    player:'#box3',
    mode:"cursor",
    actions: [
        {
            type: "click",
            forceFlag: false,
          speed: 5,
          delay: 3000
        }
    ]
});

Here’s a codepen to demonstrate (both lottie-player and lottie-interactivity loaded in settings>JS>add external scripts)

2

Hi @mattrudd82, delay is only available with the ‘chain’ mode, thats why it wasn’t working. Try this code out:

LottieInteractivity.create({
    player:'#box3',
    mode:"chain",
    actions: [
        {
            state: "click",
            forceFlag: false,
          speed: 5,
          delay: 3000
        }
    ]
});

Cheers

1 Like