Make Any Hype Animation Scalable (responsive) with Element Queries

Using JavaScript with Hype Function Library
25

as a playground i did not test the EQCSS, but just added those lines to the head … hope it’ll work :slight_smile:

btw got a teletubby-feeling :wink: and could not recognize the language! what language is it?

  function docScale(hypeDocument, element, event) {
  
  
  	function scale(){
	const wWidth =  window.innerWidth ||  (window.document.documentElement.clientWidth || window.document.body.clientWidth);
	const scaleFactor = wWidth/baseWidth;
	hypeDocEl.style.transform = "matrix(" + scaleFactor + ",0,0," + scaleFactor + ",0,0)";
	}
  
	const hypeDocEl = document.getElementById(hypeDocument.documentId());
	hypeDocEl.style.transformOrigin = "0 0";
	hypeDocEl.style.margin = "0";


	const baseWidth = parseInt(hypeDocEl.style.width);

	window.addEventListener("load", scale);
	window.addEventListener("resize", scale);


		scale();
	

    return true;
  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":docScale});
1 Like