Mode: Scroll and Play loops the animation

[powen-cs]

Trying to get Lottie Interactivity to play animation when in viewport, but play only once.

What I'm experiencing is the animation works when scrolled into viewport fine, but on completion, once I start to scroll again, it fires the animation again.

LottieInteractivity.create({
    player: '#LottieMap',
    mode:"scroll",
    actions: [
      {
        visibility: [0.3, 1.0],
        type: "play"
      },
      ]
});

I think this is the combination of Mode: scroll and Type: Play in conjunction.

I saw a previous bug for this which should have been resolved in the current versions of Lottie Interactivity:

Noted fix for this

...but this doesn't work for me.

Currently using: https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js

Type: Bug

[ghost]

I'm experiencing the same problem. Is there a fix to this?

[samuelOsborne]

hey @powen-cs and @luuklinc, if you swap out 'play' for 'playOnce', it should only play once after it shows up in the viewport

[ghost]

Hi, yes that's true, but I'd like it to play again every time it shows up in the viewport, instead of play it once and never again after.

[samuelOsborne]

@luuklinc using 'play' should achieve this then

[ghost]

Well, let me show you. In the attached example you'll be able to see what happens. It plays the animation over and over again, each time I scroll. Instead, I'd like it to play just once every time it gets into view.

https://user-images.githubusercontent.com/74877426/207367358-bcdd13ff-badb-4c0b-a61c-f2312bc6b7b4.mp4

[samuelOsborne]

have you tried playing around with the values of visibility? [0, 1] means as soon a part of it is visible it'll start playing, [0.5, 1] half etc..

[ghost]

Yes I did! But I just couldn't figure out what the best setting is, it keeps playing no matter what visibility value I set up, there's always a small area where the animation loops.

[samuelOsborne]

@luuklinc does setting the visibility to something like [0.55, 0.60] not work for your use case?

or even smaller, [0.55, 0.57]

[ghost]

I've tried, but no it doesn't, because if scrolled passed these points faster, the animation doesn't play entirely.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.