Bug: Play() method fails with most intersection observer thresholds

[joe-westcott]

Overview

https://codepen.io/joewestcott/pen/eYwqMjL

Hi team, there might be a bug with the dotLottie web player, when using intersection observers with a custom threshold value.

We're trying to lazy load and lazy play animations, using vanilla JS, and the animation fails to play if we use an intersection observer with a custom threshold such as 0.5 to run the play() method.

You can see a simple recreation of this bug at the Codepen link above.

The animation is supposed to load immediately but not play until at least 50% of the animation is visible.

To create the problem, scroll scroll down beyond 50% of the animation, and look at the browser console messages as you do this.

In most cases, the animation will not play, even though dotLottie reports that isPlaying is true, as seen in the browser console messages.

If you scroll past the animation repeatedly in both directions, eventually it will play. (This code calls play() every time that the animation intersection occurs, so eventually the play() method starts to work.)

Maybe there's some sort of race condition where the play() method isn't available right away?

There's no error message when we call play(), so it's unclear why this method is not working.

...

Consuming repo

https://github.com/LottieFiles/dotlottie-web

...

Labels

• Add the Type: Bug label to this issue.