lottieアニメーションをスクロールしたら発動させたいです。

前提・実現したいこと

javascriptを使って動きのあるサイトを作りたく、勉強中です。
lottieで複数のアニメーションをスクロールで交差するタイミングで発動させたく、IntersectionOberverを使って作成しました。
複数のlottieを設定したところ、2つ目以降のアニメーションがスクロールする前にが発動されてしまい、思っているものがつくれません。
IntersectionObserverで複数の監視する方法があれば教えていただきたいです。
以下のコードで作成すると、全て同じタイミングでアニメーションが始まってしまいます。

発生している問題・エラーメッセージ

エラーは出ていないのですが、アニメーションのタイミングが全て同じになっています。

該当のソースコード

//IntersectionObserverとターゲットの作成
observer = new IntersectionObserver(animation, options);
let AcheAnime = document.getElementById('ache_1');
observer.observe(AcheAnime);

//アニメーション発動
function animation(entries, observer) {
entries.forEach((entry) => {
if (entry.intersectionRatio > prevRatio) {
const ache = {
container: document.getElementById('ache_1'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'ache_1.json'
};
lottie.loadAnimation(ache);
AcheAnime = document.getElementById('ache_2');
const ache2 = {
container: document.getElementById('ache_2'),
renderer: 'svg',
loop: false,
autoplay: true,
path: 'ache_2.json'
};
lottie.loadAnimation(ache2);
observer.unobserve(AcheAnime);
}
});
}