Hey folks, just wondering if anyone has figured out a way to load scenes using the actual scroll bars in a browser so that a page will appear as one continuous page?
I found a few examples on the forum here but none seem to be quite what I was looking for. Some suggestions just use the scroll function of the mouse or scrolling within a set parameter on the page. If I have missed any forum post on it please let me know.
For clarity, here is an example of what I was hoping to build. Preferable that the movies would load when the scene is called so that it wouldn't have to load the whole thing at once.
Would this even be possible in Hype or should I just move on to some other way to build it? I am still learning javascript so not easy for me. Or am I just stuck in building as one super long page?
Hi Hans-Gerd. So just to wrap my head around your suggestion. Are you suggesting that I Would still make my scenes sizes really long (like say 20,000pixels) and then put some sort of invisible trigger items that would initiate the On Enter Viewport Jump to the next scene action which would load in the next scene of the same pixel length with the duplicated trigger items? Or am I misunderstanding?
I don't think scenes are what to use here, not if you want one giant scrollable page. Instead, you could use "Enter Viewport" actions. That way, you can start animations when an element enters the view. In other words, when the visitor can see it.
There's an example of this here… https://photics.com/hype-book/ …see how the balls bounce when you first see the page, and then again when you scroll to the top? You can also see this with the bouncing book or the line-drawn Hype log.
Yeah that is how I have done it in the past. The problem is that it gets the application gets really clunky when I have a really long page with several movies all on the same scene. Just thought there might be a way to make it more efficient. Maybe my computer is just too old to handle it well.
You could just add a scene transition at the bottom of a scene and reset the page scroll for an endless scroll (there is a wheel-based/swipe template on the forums), or you could have a really tall surrounding container (but not the Hype document, that would have multiple scenes) and hence, not take the full height to drive only one scene but rather divide the height by the number of scenes (as sections) and map the position you're at in a given section to the main timeline of that particular scene. Still some food for thought in there. Also, have a look at "Hype Scene Page"... it actually was a first attempt of splitting out all scenes as containers on a single page. I always wanted to develop that a bit more, as it has potential in my opinion.
Thanks Max, yes! I was mulling it over whether I could build it in the way you describe in your second suggestion. Thanks for the search terms, I'll definitely have a look.
@h_classen Interesting approach. I see that you are using a scroll event. How are you using the intersection observer? Can you elaborate a bit on how you are switching scenes? I saw a sceneChanger target, but I can't find it or determine what exactly is happening.
Ah! Now I see… the invisible rectangles at the top and bottom. I was just momentary confused, as your intersection observer enabler has a bounding box detection/calculation, usually not available to the regular intersection observer (it's out of the box only a target and root relationship). The animated rotating font element then triggers the scene switches when it hits either the bottom or top rectangle (intersects with previousScene or nextScene) and then those fires a custom behavior... nice.
Continuing to play around with this idea. Simply publishing them as separate html files and stacking them into a separate html document actually doesn't look too bad either.