Hype ScrollKit (Scrollama, Intersection Observer and more)

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

5 Likes

This looks extremely powerful, thanks for putting it together!

1 Like

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:

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:

I believe it is really common demand.:slightly_smiling_face:

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.


Please check here to understand what I mean: Sticky navigation starting at special point

Thanks again and have a nice day.

  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)

Really fascinating work. Much appreciated!

1 Like

↑ 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

3 Likes

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

3 Likes

Thanks, that would be great.

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

2 Likes

Hello @MaxZieb,

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

Thanks

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.

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

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)

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

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.

1571042552853

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)

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.

1571047316909

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

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