HypeLama (Hype + Scrollama): Scrollytelling using IntersectionObserver for Hype

MaxZieb · March 3, 2018, 6:04pm

Hello Community.

Longtime I didn’t contribute much but I thought I’d share some code I wipped up as a example for a project I am working on. It’s much like waypoints but works across multiple Hype-Instances on a page. The example only uses only one Hype-Animations but is intended for mixed HTML/CMS-content and multiple Hype-Animations across the page.

The example forwards the events to the Hype-Animation and those then can be used inside the animation as needed. Check out the init-Function (on sceneload) to see the setup. One gets enter, exit and progress updates. This example just initially pauses the timeline and then plays it in either direction on enter and exit event but obviously one can do much more.

Check out the Scrollama-Project this is based on:

Furthermore the example has the debug-mode and progress enabled (example.html):

scroller.setup({
	step: '.scroll__text .hypelama',
	debug: true,
	progress: true,
})

To enable an animation to be tracked add the class “hypelama” to it:

<div class="hypelama" id="hypelama_hype_container" …

Download the example here:
Hypelama.zip (125,0 KB)

@DBear Now updated with Polyfill for IntersectionObserver

DBear · March 3, 2018, 6:36pm

Long time indeed Nice implementation but I’m not sure about the support / lack of in some browsers. Doesn’t work in Safari or iOS or IE but nothing works in IE I, personally would probably stick to waypoints for the moment but I am 1 in a sea of many.

MaxZieb · March 3, 2018, 7:02pm

There is a polyfill (https://github.com/w3c/IntersectionObserver/tree/master/polyfill) and but your right… it's cutting edge Can I use... Support tables for HTML5, CSS3, etc

Note: As of version 1.4.0, the IntersectionObserver polyfill has been removed from the build. You must include it yourself for cross-browser support.

~~PS: I am going to update the example with the polyfill later…~~ Done!

MaxZieb · March 3, 2018, 9:50pm

@DBear Above download is now updated with Polyfill for IntersectionObserver

jonathan · March 4, 2018, 7:55pm

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

Frannie · March 26, 2018, 10:22am

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)

MarkHunte · March 26, 2018, 10:28am

Documentation for Intersection_Observer_API

Frannie · March 26, 2018, 10:35am

Thank you… I’ll have a good read

MarkHunte · March 26, 2018, 10:43am

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…

MaxZieb · March 26, 2018, 10:46am

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)

Frannie · March 26, 2018, 10:56am

Thank you! Definitely going to check all this out some more!

MaxZieb · April 5, 2018, 9:33am

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');

Bendora · February 17, 2022, 4:58pm

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.

MaxZieb · February 17, 2022, 5:28pm

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.

Bendora · February 17, 2022, 5:42pm

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.

h_classen · February 17, 2022, 6:06pm

From a sandboxed iframe to parent page .. i don't think this'll work without an provided API of your ad-service

MaxZieb · February 17, 2022, 6:08pm

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.

Bendora · February 17, 2022, 6:42pm

@MaxZieb you are a Goldenboy in my eyes.

It is working. Confirm:
https://www.prodeers-lab.com/agencies/fdh/clients/huk/04220000/index.html

Bendora · February 17, 2022, 7:34pm

if it all goes belly up, I will write this to the costumer. Thanks for the heads up.

h_classen · February 17, 2022, 8:01pm

Wow, cool