lottie.jsのイベントリスナー・制御について

Question

lottie.jsをつかって、AEで吐き出したjsonを読み込み
web上でアニメーションを実装したいと思っています。

アニメーションの表示には成功しているのですが、以下やりたいことが実装できなくて困っています。
ググりましたが、情報が少ない状態です。

1. sample1.jsonを表示
2. sample1.jsonが最後のまでアニメーションしたときにsample2.jsonに変更する
3. sample2.jsonはそのままループする

アニメーションが最後に到達したというイベント（再生が停止したイベント）を取れれば

var tgt_container = document.getElementById('bodymovin-wrapper');
const anim = lottie.loadAnimation({
	container: tgt_container,
	renderer: 'svg',
	loop: true,
	path: 'sample2.json'
});

を再度実行すればtgt_containerにsample2.jsonが描画されるのかな？とおもっています。
ご回答よろしくお願いいたします。

Answer 1

イベントは公式ページに書いてありますね。

anim.addEventListener('complete', e=> { /* なにか */} );

【Getting started · Lottie】
https://airbnb.io/lottie/web/getting-started.html#events

Comments

[bicycle8080]

ありがとうございます！！
oncompleteはためしたのですが、こちらだったのですね。
ありがとうございます！

[bicycle8080]

もう一つお聞きしたいのですが
cssのbackground: urlにlottieを入れる方法はご存知でしょうか？

[kei344]

できません。
「canvas 背景」とかで調べたらやりたいことに似たことが出てくると思います。

[bicycle8080]

そうなんですね・・・ありがとうございます！