Hype ScrollKit (Scrollama, Intersection Observer and more)

[MaxZieb (Loves Hype)]

Quick prerelease drop of this project in a 1.0 Beta (as I am on the road again) so you nice forum people can use the time to have a look. Proper example missing (anybody wants to chip in?).

Quick Summary (so far)
This extension aims at integrating scrollama (intersection observer based) and some other scroll related helper functions into Hype. When compiled properly, you would only need to include one JS-file. After that you can then use the attribute panel and custom behavior todo many things already (exit/enter events, directional exit/enter events, steps on same trigger). If you use a couple of new callback features you can even go further and use scroll progress features and more to come. See code and attribute panel for plans and settings for now.

Download
HypeScrollKit.zip

Demo
HypeScrollKit.html

Versionhistory
1.0 (Beta) Initial release under MIT-license
1.1 Some refactoring and scroll functions
1.2 Added hypeDocument.registerScrollCallback
1.3 Included dependencies and a minified version, Safari now supported

[Daniel]

This looks extremely powerful, thanks for putting it together!

[alexlii (Alex)]

Hello @MaxZieb,

Thanks for your great work.

1#I found it does not work in Safari, but works on Chrome and Firefox, and here is some debug infor on Safari for your referance:

Screenshot

2# I note that you include some javascript from https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js

I have to use VPN to access it otherwise the browser will always in loading...
It would be great if you could include it into Hype since the speed always fluctuate a lot globally even it is delivered by CDN.

3#I did not found an fixed an element during scroll up and down.

Here is a quite similar feature request for it:

Fixed Menu on scroll screen (iPhone X)

hype behaves quite strange on position fixed … though its comprehensibly that not all css from outside is reliable for hypes runtime … did you try aasigning the class fixed onsceneload¿ element.querySelector('.toFix').classList.add("fixed"); not sure if it works …

@Mandrak134

Dear Tumult team,
Can you add a feature, very simple :
After selecting element, in the Inspector, just check a checkbox “Fixed on screen”.
By adding this, we could add a Tab bar menu, Top menu, or fixed Background, in order to create very complete web app.
Please help us!!!

I believe it is really common demand.

4# Please take Enable width Scale setting and flexible layout into consideration, so that this work would flexibly fit more situations.

5# IF POSSIBLE, it would be much great if it support to set A row to be full- height, actually, I already added this feature request, please check at Feature requests upon friendly web page building for NON software coding background

It is quite easy to achieve that in traditional webpage composer, but it is quite difficult in Hype especially in a long height project.

6# Enable/disable scrollY visible or readable.

In Most case, it is too complicated for designers without software coding background to set a element position in cross purpose case. Since we do not know how to understand the relative or absolute position.

It would be much helpful during Hype project working by Enable that feature, and disable it when it completed.

Screenshot

Please check here to understand what I mean: Sticky navigation starting at special point - #11 by JimScott

Thanks again and have a nice day.

[MaxZieb (Loves Hype)]

1. Safari needs a polyfill for Intersection Observer to work loaded from unpkg. Will be included later

2. See first

3. Read the code comments as suggested in the description. Is planned but not in the beta

4. If scale puts Intersection Observer off (haven’t tested that) then there is little I can and will do about it. Just don’t use it on the objects triggering stuff then I guess. A thing I am planning on doing is exploring Resize Observer.

5. Full height is part of Hype and will not be included (see Hype pinning/sizing etc.). This is just a trigger helper

6. Not sure what you mean but the library doesn’t work with scrollY it is based on Intersection Observer (please read about)

[tgr (Trond Grøntoft)]

Really fascinating work. Much appreciated!

[MaxZieb (Loves Hype)]

↑ look at project
1.1 Some refactoring and scroll functions

Still not happy with the progress callback handlers in hypeDocument. Will probably refactor them with a registerCallback function. Also progress callback handlers in elements with hidden overflow only react correctly if on screen!

Update:
1.2 Added hypeDocument.registerScrollCallback

[MaxZieb (Loves Hype)]

Just saw that Safari isn’t working despite the polyfill. I’ll look into the matter next week.

[alexlii (Alex)]

Thanks, that would be great.

[MaxZieb (Loves Hype)]

↑ look at project
1.3 Included dependencies and a minified version, Safari now supported

[alexlii (Alex)]

Hello @MaxZieb,

There is no animation on these two elements, so what are they used for please?

Thanks

[MaxZieb (Loves Hype)]

This document is just for testing. I used the mentioned elements for testing but then not anymore and put them at the bottom of the document. If everything is working fine now, one can start creating a more appealing example/test-case.

[MaxZieb (Loves Hype)]

↑ look at project
* 1.4 Minor fixes on scrollTo functions (crossbrowser)

[alexlii (Alex)]

Hi @MaxZieb,

I changed the height of iPad Hochformat to be 4000, and add a timeline named “Scroll at fixed position”.

Is it possible to TRIGGER the timeline of “Scroll at fixed position” only when the layout is scrolled between 1600 and 2400?

I know there is some scroll timeline javascript like:

window.onscroll = function() {	
var scrollAmount = scrollY;
hypeDocument.goToTimeInTimelineNamed(scrollAmount * 0.006, 'timeline');

but What I expect is the timeline is scrolled at a fixed position, mostly like set elements or a group element as below:

absolute
<1600

fixed and trigger to scroll that timeline
>1600,<2400,

Back to absolute
>2400

So, What I exactly mean is how to trigger that timeline only between >1600,<2400

Here is the document for check.

HypeScrollKit-2.hype.zip (66.8 KB)

[MaxZieb (Loves Hype)]

This code is provided as is and not for beginners. Please study the file. If that is beyond your scope of understanding then please use the official function in Hype based on waypoints (enter view and exit view etc.).

[alexlii (Alex)]

Hello,

I understand how the blue and green trigger work, but I do not understand how the red trigger works by custom behavior, I added a new black trigger to trigger a new timeline named “black”, but it not work.

I can see the black debug logs in console, but the timeline does not play:

Is there any other setting I missed please?

It would be great if you let me know how the red trigger work,or make the black trigger work too, Please check the document, thanks for in advance.
HypeScrollKit_by_Alex.hype.zip (62.6 KB)

[alexlii (Alex)]

By the way, is it possible to set the element to be fixed position of 0.2? otherwise, it will exit the view area before the animation complete.

Please check the Hype document below to understand what I mean, thanks.
Scrollatfixedpostion.hype.zip (351.1 KB)

[alexlii (Alex)]

@alexlii

but I do not understand how the red trigger works by custom behavior,

The names of custom behaviors much be as:
black_1_exit_up
black_exit_down

The only problem for me now is how to trigger the elements animation at the fixed/sticky position once upon the elements reach/move out the observer trigger.

To achieve this purpose, it maybe need some code to trigger/change the elements from absolute to fixed, and then change back to absolute after animation.

It would be great if someone would like to help.

By the way, I note it support scrolling symbols, is it possible to support scrolling group of elements on specific timeline too please?

Thanks