Hype Sticky Scroll: Scroll through all scenes

[MaxZieb (Loves Hype)]

Introducing Hype Sticky Scroll, a powerful and versatile tool that unlocks the potential of scroll-driven animations in your Tumult Hype projects. With this plugin, create seamless and engaging scroll-based experiences that respond dynamically to user interactions.

Key features include:

• Scene filtering and ignoring: Choose which scenes to include or exclude from the sticky scroll animation (just add to the scene name).
• Customizable wrapper height: Adjust the height of the wrapper to fit your content and design.
• Function callbacks: Implement custom behaviors with the stickyScrollBefore and stickyScrollAfter callbacks.
• Progress tracking: Monitor the scroll progress and use it to control the playback of your animations (easier method in the works).
• Smooth scene navigation: Scroll to specific scenes with ease, complete with customizable durations and easing options.

Use Hype Sticky Scroll in your projects and create interactive,
immersive experiences that captivate your audience!

Get the code and read the documentation on GitHub:

GitHub - worldoptimizer/HypeStickyScroll: Make a Hype widget sticky in a...

Example file:
ScrollThroughScenesSticky.hype.zip (89,3 KB)

[ktewes (Kalle)]

I like!!

[jonathan (Jonathan Deutsch)]

Awesome! It'd be good if scrolling up kept on the first frame of the first scene - right now it goes to blank (I assume trying to change to a non-existent scene?)

[MaxZieb (Loves Hype)]

It was actually the first scene I used for setup and was blank and shown at percentage zero (scroll). I removed it and the setup() is now done on scene A. One could use a document load event handler in head, but I didn't as I was using it on WordPress. Upload was updated. We really need a Hype Document Load stack in the document inspector also scene/document infos in the API.

Here is also a nice snippet to avoid over scrolling at the borders (disabling the elastic band effect):

Put this in Head HTML:

<style>	
	body {
		overscroll-behavior-y: none;
	}
</style>

[MaxZieb (Loves Hype)]

↑ look at project
Version 1.0.0 on GitHub

• 1.0.0 Initial release under MIT-license

[MaxZieb (Loves Hype)]

↑ look at project
Version 1.0.3

• 1.0.1 Modernized code and cleanup
• 1.0.2 Added a way to ignore scenes and callbacks
• 1.0.3 Added function callbacks stickyScrollBefore and stickyScrollAfter

[MaxZieb (Loves Hype)]

↑ look at project
Version 1.0.4

• HypeDocumentLoad set to push on HYPE_eventListeners (instead of unshift)

Version 1.0.5

• Added getScrollFromProgress

[MaxZieb (Loves Hype)]

You can now do things like this (might be integrated in the future):

function scrollSnapper(hypeDocument, element, event) {
	hypeDocument.snapPoints = [0, 0.5, 0.75, 1];
	hypeDocument.toleranceForward = 200;
	hypeDocument.toleranceBackward = 50;
	let scrollTimeout;

	window.addEventListener('scroll', () => {
		const p = hypeDocument.getProgress();
		
		clearTimeout(scrollTimeout);

		if (!hypeDocument.snapPoints) return;

		const currentScrollY = hypeDocument.getScrollFromProgress(p);

		for(let point of hypeDocument.snapPoints) {
			let scrollPoint = hypeDocument.getScrollFromProgress(point);
			if(currentScrollY < scrollPoint + hypeDocument.toleranceForward && currentScrollY > scrollPoint - hypeDocument.toleranceBackward) {
				return;
			}
		}

		scrollTimeout = setTimeout(() => {
			const higherPoints = hypeDocument.snapPoints.filter(point => hypeDocument.getScrollFromProgress(point) > currentScrollY);

			if(higherPoints.length > 0) {
				let closest = Math.min(...higherPoints.map(point => hypeDocument.getScrollFromProgress(point)));
				window.scrollTo({
					top: closest,
					behavior: 'smooth'
				});
			}
		}, 1000);
	});
}


if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":scrollSnapper});

This approach is similar to the pixelbased version found here, but uses the progress methods of the HypeStickyScroll approach.