showing and hiding elements depending on zoom level

Hi, I am trying to show and hide elements depending on the zoom level. I grabbed the function that tracks the zoom level on this example and added the conditions. Is this approach correct/clean or is there a better way to achieve it?

here is the code I am using:

` var updateZoom = function() { var zoom = viewer.viewport.getZoom(true); var imageZoom = viewer.viewport.viewportToImageZoom(zoom);

             zoomEl.innerHTML = 'Zoom:<br>' + (Math.round(zoom * 100) / 100) + 
              '<br><br>Image Zoom:<br>' + (Math.round(imageZoom * 100) / 100);
			  
			var zoomL =(Math.round(zoom * 100) / 100)
			
			
			var zoom0="0.01"
			var zoom1="0.02"
			var zoom2="0.03"
			
		
			
			
		
           var square = document.getElementById("square");
			var circle = document.getElementById("circle");
			var triangle = document.getElementById("triangle");
		
		
	
			
			if(zoomL>=zoom0&&zoomL<zoom1){
				
			   square.style.display = "none";
				circle.style.display = "none";
				triangle.style.display = "block";
				 console.log ("zoom level 0")
				
				}
			
			
				if(zoomL>=zoom1&&zoomL<zoom2){
					
				square.style.display = "block";
				circle.style.display = "none";
				triangle.style.display = "none";
				 console.log ("zoom level 1")
				
				
				
				}
			
			
				if(zoomL>=zoom2){
				
				square.style.display = "block";
				circle.style.display = "block";
				triangle.style.display = "none";
				 console.log ("zoom level 2")
				
				
				}
			
			
			} // FIN UPDATE ZOOM
		
			

			
			viewer.addHandler('open', function() {

			viewer.addHandler("animation-finish", function animationFinishHandler(event){
             console.log("animation-finish");
			  updateZoom();
		
				});
			});`

Thanks so much for any light.

[Salitehkat]

Thank you!!! Ill apply these ideas and come back with a report,

[msalsbery]

@Salitehkat Looks resolved, closing. Please feel free to reopen this issue if necessary!