Multiple players, but only the first one runs its animation

Lottie in Web
1

So I’ve got a Wordpress post with three players added to the editor as blocks via the LottieFiles plugin (Reside – Simon Parkinson). Each one has a unique animation, exported from After Effects via Bodymovin, with the JSONs uploaded to the media library.

The problem is that on the front-end, only the first player actually runs its animation (although they all appear to be loaded in the DOM and rendered). I’ve tried using different files, exporting from After Effects via the LottieFiles extension, uploading the JSONs to my Lottie workspace and pulling them down from there, but nothing seems to help. The only thing I can say for sure is that it’s always the first instance of a player that runs, having swapped around the order of the blocks.

I’m guessing there’s some kind of conflict going on as all three demonstrate the normal animation behaviour in the back-end editor, so it’s probably not the files themselves. Anybody got any ideas?

2

OK, after a lot of testing, I figured out this out and it’s irritatingly simple.

I’d DUPLICATED the LottieFiles blocks and replaced the assigned JSON in each instance, rather than adding a NEW block each time. As a result, all the elements are rendered on the front-end with identical id=“” values. For whatever reason, this borks the all the players after the first instance.

Dumb, but worth noting if you’re using LottieFiles with Gutenburg.

1 Like