Visible Lag while using the Interactivity Player and animation chaining

Lottie in Web
1

Hello,

I hope this is not a repeated topic :slight_smile:

And my team has been using the lotties on our client’s website, and we run into a problem that we can’t solve ourselves.

In a nutshell, we’re using the Lottie interactivity player chaining to load multiple animationss, one after another, onComplete, based on that: https://lottiefiles.com/blog/working-with-lottie-animations/how-to-chain-interactions-lottie-interactivity.

There’s a really short visible delay between loading each consecutive animation, that we’d like to get rid - to offer a more smooth viewing experience.

Our code is as follows:

<script>
addEventListener("DOMContentLoaded", (event) => { 
		  LottieInteractivity.create({
			player: '#chain',
			mode: 'chain',
			actions: [
			  {
				  state: 'autoplay',
				  transition: 'repeat',
				  repeat: 1
			  },
			  {
				  path: 'B.json',
				  state: 'autoplay',
				  transition: 'onComplete',
				  reset: true,
			  },
			  {
				  path: 'CC.json',
				  state: 'autoplay',
				  transition: 'onComplete',
				  reset: true,
			  },
			  {
				  path: 'D.json',
				  state: 'autoplay',
				  transition: 'onComplete',
				  reset: true,
			  }
			]
		  });
	});
	</script>

I’ll be happy to have some sort of feedback on that topic!

Sincerely,
Rafal Gicgier