@DBear Above download is now updated with Polyfill for IntersectionObserver
1 Like
Very cool!
There are some issues with waypoints I’ve wanted to solve and it sounds like InteractionObserver can fix them (and maybe the polyfill too).
This looks GREAT 
Many thanks @MaxZieb for putting it up!
Just out of curiosity, does anyone happen to know if the same principle could be used entirely within Hype? Like, for example, if an entire site is made using a single Hype document which uses enter and exit viewport triggers to drive the content (I’ve attached a very simple hype plus a vid of it being used to help illustrate).
It would be brilliantly cool if content could be triggered at that ‘middle of the window’ line whilst remaining fixed in place within the browser window instead of scrolling. I’m probably not explaining myself very well but hopefully someone might be able to understand my ramblings 
waypoint_example.hype.zip (20.4 KB)
1 Like
Thank you… I’ll have a good read 
1 Like
Hey Frannie, I put the doc link up as I thought it is useful in these type of threads to have a link to the object of discussion. It was not really in reply to you… 
But hope it helps…
1 Like
There is also still the built in waypoints feature in Hype Pro https://tumult.com/hype/pro/
In HypeLama you can use the following in scroller.setup (see documentation https://github.com/russellgoldenberg/scrollama#api)
-
offset(number, 0 - 1): How far from the top of the viewport to trigger a step. (default: 0.5)
1 Like
Thank you! Definitely going to check all this out some more! 
For anybody that wants to use this with the WordPress-Plugin use the following in your functions.php or use a plugin like “snippets” (search under install plugins) to add the code.
Hint: Make sure to name your file in lowercaps and without any whitespaces or hyphens etc.
function add_hypelama_scripts(){ ?>
<script src='https://unpkg.com/intersection-observer'></script>
<script src='https://unpkg.com/scrollama'></script>
<script>
// initialize the scrollama
var scroller = scrollama();
// scrollama event handlers
function handleStepEnter(response) {
// response = { element, direction, index }
var hypeElmID = response.element.querySelector('div').getAttribute('id').replace(/_hype_container/ig, '');
HYPE.documents[hypeElmID].handleStepEnter(response);
}
function handleStepExit(response) {
// response = { element, direction, index }
var hypeElmID = response.element.querySelector('div').getAttribute('id').replace(/_hype_container/ig, '');
HYPE.documents[hypeElmID].handleStepExit(response);
}
function handleStepProgress(response) {
//console.log('exit', response);
var hypeElmID = response.element.querySelector('div').getAttribute('id').replace(/_hype_container/ig, '');
HYPE.documents[hypeElmID].handleStepProgress(response);
}
function init() {
scroller.setup({
step: '.hypelama',
debug: false,
progress: true,
offset: 0.5
})
.onStepEnter(handleStepEnter)
.onStepExit(handleStepExit)
.onStepProgress(handleStepProgress);
// setup resize event
window.addEventListener('resize', scroller.resize);
}
// kick things off if we find hypelama
if (document.querySelector('.hypelama')) {
init();
}
</script>
<?php }
add_action('wp_footer', 'add_hypelama_scripts');
Is would this be working inside a Banner format inject deep in a website?
Would like a solution for this, so that we can start using these entering Viewport functions.
Well, it is external JS, you need to include it in your banner file directly or in the package. It also is based in Intersection Observer and has the Polyfill in the source. I saw one could update the dependencies after all this time. Seem like Scrollama was updated meanwhile. I made a bundle from this called ScrollKit. You can also use Hype Action Events and add the polyfill there if you need to support older Browsers, I also just put some scrolling samples out that only work with on scroll, as well. Either way, using an Intersection Observer is more modern than doing some plain old scroll math.
As you know. If I create a Banner 300x250 and this gets loaded into an iframe on a website I don't habe to option for the banner to be scrolled into view. There is no scrolling in the banner itself. But on the website it is placed on.
Would be nice if @jonathan maybe has a solution to update the Viewport Actions with the new Intersection Observer. As the Viewport Actions don't work within an iframe.
From a sandboxed iframe to parent page .. i don't think this'll work without an provided API of your ad-service
1 Like
Took a copy of Suedeutsche and stuck the banner as an iFrame into it… but I was on my local server.
Try this as a starting point:
IntersectionBanner.hype.zip (23,9 KB)
But sandboxing will probably prevent it from working like @h_classen said …
Update: just tested it loading across two domains and it works! Only thing there is a slight undefined bug (for my custom isAbove attribute) in Hype Action Events at the moment when using it in an iframe. I will fix it tonight.
3 Likes
@MaxZieb you are a Goldenboy in my eyes.
It is working. Confirm:
https://www.prodeers-lab.com/agencies/fdh/clients/huk/04220000/index.html
1 Like
if it all goes belly up, I will write this to the costumer. Thanks for the heads up.
Wow, cool 
Thanks, for all the flowers guys, but be aware that the Polyfill won't work in a cross domain iFrame as you can read on the w3c polyfill page, the Sandbox breakout is rooted in direct browser support allowing the detection. Hence, a polyfill can't work around the sandbox :
Meaning it will fail on everything listed here in red:
I have it working on one domain, but not nested in a second one.
https://www.prodeers-lab.com/agencies/fdh/clients/huk/04220000/garage.html
Also my loopCount gets ignored. Wenn in view it is infinite. We can't exceed over 30 Seconds.
@MaxZieb I cannot rename the Hype file. Your HypeActionEvents.min.js has the ID caught on line 66 to not update to the new name main DIV ID. The js-file is minified so I can't understand it. 
You can find it all unminifed on GitHub
1 Like