Synchronized animation after toggling between browser tabs or applications

Symbols
10

This may help, I remembered I have used in the past

Document: visibilitychange event - Web APIs | MDN

This way you don't get the glitch before reset.

We fire the visibilitychange init code (initVisibility function) On Prepare For Display.

smoke_scripted_MHv2 2.hype.zip (19.7 KB)

The smokeCompl symbol also has the class name of mainSmoke

initVisibility function

	const mainSymbol = document.querySelector('.mainSmoke')
	const 	mySymbol = hypeDocument.getSymbolInstanceById(mainSymbol.id)	
	
		
	 
	var hidden, visibilityChange; 
	
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}
	
	document.addEventListener(visibilityChange, handleVisibilityChange, false);
  
   
 
  function handleVisibilityChange() {
 		hypeDocument.customData.hidden = //
 		
 			
	console.log (document[hidden])
	
	if (document[hidden]){
	
	 	console.log ("stopping")
  		mySymbol.pauseTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
  		mySymbol.goToTimeInTimelineNamed(0, 'Main Timeline')
  		
  		counter = 0;
	 
	} else {
		console.log ("starting")
	mySymbol.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
	}
   
  }
3 Likes