Duplication error on Lottie File/.JSON when navigate through slides

Animation
1

Hi

I have been testing how to implement .JSON files using the methods of this post.

I manage to get the .JSON file works but if I use more slides and go back to the first one I noticed that the animation starts to get duplicated vertically. Is there any solution to this?

First run

1
1.png1594×952 18.7 KB

After go back 1 time

2
2.png1628×912 25.1 KB

After go back 2 times

3
3.png1446×930 27.6 KB

Lottie Duplication.zip (20.3 KB)

2

That because your call is on sceneload. Going back loads the scene.

You may be able to use

if (typeof window.rippleLoaded == "undefined") {
	/* Load vector animation from project resources */
	var animation1 = bodymovin.loadAnimation({
    	container: document.getElementById('animation1'), // Required
    	path: '${resourcesFolderName}/ripple_loading_animation.json', // Required
    	renderer: 'svg', // Required
    	loop: true, // Optional
    	autoplay: true, // Optional
    	name: "RippleLoading", // Name for future reference. Optional.
    	
    })	
    
    
  window.rippleLoaded = true 
}
3

Hmmm, can’t make it work. Is there any other way to load the .json file automatically in the scene without using “On Scene Load”?

4

??

Lottie Duplication.hype.zip (16.2 KB)

5

Now it works.
It was just a “}” that i missed at the end of the code.

Thank you very much!

1 Like
7

I ran into the same problem when using Lottie with Hype. Then I figured out that you can run Lottie “On Scene Load” as normal, and run a second Javascript function “On Scene Unload” with: lottie.destroy() That will stop Lottie from running on the Scene you went away from. If you go back to the scene, Lottie will run your “On Scene Load” function again.

2 Likes