Confused with terms and setting

Hello,

Usually, some animation will be not visible or the animation is already finished if the webpage is loaded very fast, or the animation is not so smooth.

For example, here is a menu by Hype:

and you might note what I mean by checking it online at https://www.lovcour.com/homenew/water_9a/

Fortunately, I noted that there are new functions with latest version, and checked the documentation at https://tumult.com/hype/documentation/#scene-actions

  • On Scene Load — Triggered when entering the scene.
  • On Scene Unload — Triggered when leaving the scene.
  • On Prepare for Display — Triggered before scene transitions but after the scene’s DOM structure has been created.
  • On Layout Load - Triggered when the currently-selected layout loads. HYPE PRO ONLY
  • On Layout Unload - Triggered when the currently-selected layout unloads.

I suppose these feature support/guanratee the animations will start only after the webpage is loaded, and it is visible to frontend users, right?

If yes, I am quite confused by these two setting: “On Scene Load” and “On Prepare for Display”, which one I should use for setting please?

Thanks

With typical export code, Hype will begin the loading process upon a DOMContentLoaded event. You can then learn more about the flow from this post:

Given that resource loads from other HTML/JavaScript can happen dynamically and asynchronously, there’s no practical way to know when loading (in a colloquial sense) is done. Therefore Hype tries to show its content as soon as possible. If you have specific knowledge on when it is safe to begin your animations, you can use techniques such as starting with a timeline paused, and then use the Hype API to start timelines or show a scene. Some folks get around this by simply adding a small delay, but clearly this won’t work in all cases.

Going to above, there are literal definitions of loading based on web event callbacks (DOMContentLoaded and load), but for all intents and purposes on a complex page these fall apart because most loading happens after them. Hype isn’t aware of anything that would take place after these events so it is up to you to delay running animations if you know the page isn’t yet ready.

These events are based on showing scenes in Hype and don’t have any relation to overall page loading.

On Scene Load and On Layout Load are the same event, just the layout variant is named such if you are using layouts to avoid confusion. This event is called after a scene is fully transitioned in and shown. The Main Timeline will already have been set to run. The “current scene” used in API calls reflects this scene.

On Prepare for Display is the new Hype 4 event. It is called when a new scene is about to be shown, but isn’t being displayed yet. The DOM structure has been created, and that’s about it. It is mainly for making any of your own DOM changes so that when the scene is displayed those are immediately shown. Think of the case of a Page Turn or a crossfade transition – in these cases the you’ll be showing a partial scene before “On Scene Load” has been called, so you’ll need some opportunity to make programmatic changes, otherwise if you just used the On Scene Load event it would show incorrect content and then snap once a transition is completed. When using this event, the “current scene” used in API calls is not this scene, it is the previous one. Thus you can’t run timelines since it isn’t technically active.

Thanks for so much detailed information.

I know there is an “preload” setting for images, but no option for elements like text, button, rectangle…

Does “preload” means the animation will start only after it is loaded? if yes, is it possible to set other elements to be “preload”?:grinning:

Thanks

Preload means that Hype animations will not begin until the resources with this checkbox are loaded. However, it is not related to anything else going on with the page. So if all preloading of Hype resources has loaded the animation will start, but there’s still a possibility of stutter if your page is doing other things.