Load Scenes on Scroll

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?

simple solution could be to use Hypes viewportaction.
so for example switch a scene when an element leaves or enters the viewport

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.

A basic template is available here… Free Template Tuesday #35 – Tumult Hype “Webpage” – Photics.com …that should help you get started, but then you'll need to add your own Viewport actions.

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.

Here are the links:

and

1 Like

Awesome, thank you! Going to check these out.

1 Like

just a small test ... this won't necessarily fulfill all your wishes though :slight_smile:
videos not optimized, no posterimages etc ...

https://www2.aachener-zeitung.de/zva/karlo/test/scrollToAnimationPlusScenechange

ah ... and this one may be interesting too: Hype ScrollKit (Scrollama, Intersection Observer and more) :slight_smile:

3 Likes

@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.

I"m Out of Office at the Moment.

There are two Elements in top and bottom of a scene. If they intersect with the sourceelement the scene will BE switched

May Not BE necessary ... Looking for Timelinestatus instead should Work too

1 Like

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.

:+1:

1 Like

Couldn't have explained it better ... thx for doing so :slight_smile: i promise improvement ... :wink:

2 Likes

I really like this solution. Very elegant. Definitely something that I could play around with.

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.

1 Like

The extension solution looks really great Max. Could definitely work for me. Thank you so much guys. These are some really great jumping off points!!

1 Like

You can simply make the document longer. I have made Hype docs of up to 6000 pixels.

Yeah, unfortunately I may need a new computer for that. This is what happens when I load a bunch of movies on the same scene.

What are you loading? Vimeo or YouTube videos? Or are you directly embedding videos? How big are the videos (megabytes).