Hype Sticky Scroll: Scroll through all scenes

Extension Project
1

Cover
Cover1280×905 194 KB

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 :lock: 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!

CleanShot 2023-03-20 at 23.35.05

Get the code and read the documentation on GitHub:

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

10 Likes
2

I like!! :+1:

3

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

1 Like
4

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 :wink: 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>
2 Likes
5

↑ look at project
Version 1.0.0 on GitHub

  • 1.0.0 Initial release under MIT-license
4 Likes
6

↑ 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
7

↑ look at project
Version 1.0.4

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

Version 1.0.5

  • Added getScrollFromProgress
8

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.

Update since 1.4.x: this is now built in

9

7 posts were split to a new topic: Using Hype Sticky Scroll with Blocs App

10

6 posts were split to a new topic: Using Hype Sticky Scroll with symbols

11

↑ look at project
1.0.6

  • Added scrollToProgress, refactored scrollToSceneStart with options object and offset support

1.0.7

  • Deferred DOM setup with requestAnimationFrame, added guard patterns to prevent extension conflicts

1.0.8

  • Added autoScrollSpeed setting and improved scroll animation comments

1.0.9

  • Changed duration parameter from milliseconds to seconds for consistency

1.1.0

  • Added Lenis smooth scroll support with auto-detection and setupLenis helper function

1.2.0

  • Added getProgressFromSceneTime and scrollToSceneTime for scene-time based navigation
2 Likes
12

↑ look at project
1.3.0

  • Added scene focus with setSceneFocus/clearSceneFocus, snapToBoundaries option, and viewportHeightUnit option

1.4.0

  • Added scroll snapping with setupScrollSnapping, scene-time based snap points, and asymmetric tolerance zones

1.4.1

  • Added visual debug mode with snap point visualization, overlap detection, and current scene/time display

—
To test visual debugging enable the debug default and set up some snap points. It’s really helpful to dial in snaps and the tolerances around them! For more details check the read me on GitHub.

2 Likes