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


#1

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


How can I recreate this type of scroll?
Play timeline on viewport enter
#2

Long time indeed :wink: 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 :smiley: I, personally would probably stick to waypoints for the moment but I am 1 in a sea of many.


#3

There is a polyfill (https://github.com/w3c/IntersectionObserver/tree/master/polyfill) and but your right… it’s cutting edge https://caniuse.com/#feat=intersectionobserver

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!


#4

@DBear Above download is now updated with Polyfill for IntersectionObserver


(Jonathan Deutsch) #5

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


(Fran Brennan) #6

This looks GREAT :grinning: 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 :slightly_smiling_face:

waypoint_example.hype.zip (20.4 KB)


(Mark Hunte) #7

Documentation for Intersection_Observer_API


(Fran Brennan) #8

Thank you… I’ll have a good read :slightly_smiling_face:


(Mark Hunte) #9

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… :smile: But hope it helps…


#10

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)

(Fran Brennan) #11

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


#12

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