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


(Ben) #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

After go back 1 time

After go back 2 times

Lottie Duplication.zip (20.3 KB)


(Mark Hunte) #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 
}

(Ben) #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”?


(Mark Hunte) #4

??

Lottie Duplication.hype.zip (16.2 KB)


(Ben) #5

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

Thank you very much!


(clark) #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.