Two Tips, css vars and HypeScenePrepareForDisplay

Tips & Tricks
1

Just wanted to post some tips as they may come in handy to some one. I am only briefly explaining these as it should not be hard for you to experiment and test the limits of any of these…

First one is a to point out in v4 you can use the HypeScenePrepareForDisplay event similar to how you would use the HypeSceneLoad event to catch all scene loads. The HypeScenePrepareForDisplay will catch all scenes PrepareForDisplay.

   <style>
    	:root {
      --main-scenename: "";
    }



    .sceneName::after {
      content: var(--main-scenename);
       text-transform: capitalize;
    }
     
    	</style>
    	
      <script type="text/javascript">	
    	
    	function scene(hypeDocument, element, event) {
     let root = document.documentElement;
 
     
     let thisScene = hypeDocument.currentSceneName()
     root.style.setProperty("--main-scenename",'"this is ' + thisScene + '"');
     
    
      
         
    }

    if("HYPE_eventListeners" in window === false) {

    window.HYPE_eventListeners = Array();

    }
    window.HYPE_eventListeners.push({"type":"HypeScenePrepareForDisplay", "callback":scene});
     
    </script>

Next tip, is using css custom variables.

As you see above we have a :root pseudo-class set up which can be used for variable css properties.

We assign the var property as a property of an elements css.

And we can then use javascript to change the value of the css property.
In this case I am doing so in the HypeScenePrepareForDisplay event to get and display the current scene name, incidently I am also using the trick of replacing text content with it.

Important note about the latter. You must double quote around any text you use or it may not show up in hype. i.e

"--main-scenename",'"this is ' + hypeDocument.currentSceneName()+ '"'

tips.hype.zip (31.5 KB)

5 Likes