Load Scenes on Scroll

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.

1 Like

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.

1 Like

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

2 Likes

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.

1 Like

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.

2 Likes

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.

1 Like

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

Typically I would be using stock video from Dreamstime in MP3 or MP4 format.
They are short clips so not super large. And I do drag them right onto the scene. I understand though I do need a new computer. It's going on ten years old now. I do think your sample there with the All scenes on one page extension actually works pretty well for me. Here is a little test with just 2 scenes. I don't seem to have any problems at all running it on my ancient lap top even with 3 or 4 scenes with movies on them. Doing it with the extension.

Not quite sure why the first text box doesn't load when the page first loads in though. The text animation on the other page seems to work fine and it works when you scroll back to the first page but not on the initial page load.

Comments welcome.

test6.hype.zip (2.5 MB)

I am looking into actually stripping out additional DOM trees as they might bloat the page.

1 Like