Lottie Animation not working with bodymovin

Lottie in Web
1

I have set up a test page here: https://www.rebound-tech.com/test.html

You can see that I have 3 headings:
Display Animation 1 Below
Display Animation 2 Below
Display Animation 3 Below

But only Animation 2 shows up. I inherited a website with all of these animations and I recently had someone change Animation 1 and 3. When I uploaded them to the website they didn’t work so I decided to take out any excess code and create the test page (link above).

All of the animations on the site use bodymovin rather than lottie-player.js. I have used the After Effects files to export Animation 1 and 3 using the bodymovin extenstion for that program. In the linked page I have the bodymovin script which runs the Animation 2 JSON file but it doesn’t work for 1 and 3.

Can anyone tell me why this doesn’t work for animations 1 and 3 and if there is a way to make them work?

2

No help? Nobody knows why they won’t work?

3 
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.14/lottie.min.js" integrity="sha512-G1R66RZMhyLDEcAu92/Kv4sWNypnEiJcM6yhe0PNyiYDaMAKpMrJ6ZLR67xC/RMNGRa8Pm9TxtO8a98F6Ct+Gw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
	<body>
		<h2>Diplay Animation 1 Below</h2>
		<div id="container"></div>
		<h2>Diplay Animation 2 Below</h2>
		<div id="container2"></div>
		<h2>Diplay Animation 3 Below</h2>
		<div id="container3"></div>	
		<script>
		   lottie.loadAnimation({		
			  container: container, // required
			  path: 'https://www.rebound-tech.com/wp-content/themes/rebound/animations/data01c.json', // required
			  renderer: 'svg', // required
			  loop: true, // optional
			  autoplay: true, // optional
			  });
		   lottie.loadAnimation({
			  container: container2, // required
			  path: 'https://www.rebound-tech.com/wp-content/themes/rebound/animations/data02c.json', // required
			  renderer: 'svg', // required
			  loop: true, // optional
			  autoplay: true, // optional
		   });
		   lottie.loadAnimation({
			  // animationData: { /* ... */ },
			  container: container3, // required
			  path: 'https://www.rebound-tech.com/wp-content/themes/rebound/animations/data03c.json', // required
			  renderer: 'svg', // required
			  loop: true, // optional
			  autoplay: true, // optional
		   });
		</script>
	</body>
</html>

This should work.

1 Like
4

Thank you, that worked perfect!!!