Scrollingtelling-like

2

There's probably a lot of different approaches to do this type of effect. The basic route I would go is to combine two techniques: use a CSS position:fixed for a group that contains animations, and then bind scrolling to a timeline via javascript. The basic steps would be:

  1. Make an animation on another timeline, I'll call this "Scroller Timeline"
  2. Place the elements of this animation in a group that is positioned to the top
  3. Add a class name in the identity inspector of something like "fixed"
  4. Then add CSS to the head html (via the document inspector) for a fixed class:
<style>
	.fixed {
		position: fixed !important;
	}	
</style>
  1. Add JavaScript code that binds the scroll to the timeline (inspired via this post):
<script>
	// Change the timeline name to the scroll timeline you are using
	var timelineName = "Scroller Timeline";

	// for some reason we need ot set the timeline time to 0 on load, otherwise it will be offset
	if("HYPE_eventListeners" in window === false) {
		window.HYPE_eventListeners = Array();
	}
	window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback": (function (hypeDocument) { hypeDocument.goToTimeInTimelineNamed(0, timelineName); } )});

	// on a scroll event, make the percentage of the timeline equal to the percent of the scroll
	window.onscroll = (function scrollTest() {
	 	var hypeDocument = Object.values(HYPE.documents)[0];
	 	var timelineDuration = hypeDocument.durationForTimelineNamed(timelineName);
	 	var scrollPercent = getScrollPercent();
	 	var time = Math.max(0, (timelineDuration * scrollPercent));
	 	
	 	hypeDocument.goToTimeInTimelineNamed(Math.max(0, (timelineDuration * scrollPercent)), timelineName);
	});
	
	// helper functions
	function getScrollHeightElement() {
		if(window.visualViewport != null) {
			return document.scrollingElement;
		} else if(document.compatMode == "BackCompat") {
			return document.body;
		} else {
			return document.documentElement;
		}
	}
	
	function getScrollTopElement() {
		if(window.visualViewport != null) {
			return document.scrollingElement;
		} else {
			return document.body;
		}
	}
	
	function getScrollPercent() {
		var scrollHeightElement = getScrollHeightElement();
		var scrollTopElement = getScrollTopElement();
		return scrollTopElement.scrollTop / (scrollHeightElement.scrollHeight - scrollHeightElement.clientHeight);
	}

	
</script>

Here's the document I put together that shows the completed effect:
scroll-story.hype.zip (34.4 KB)

There's plenty of other approaches or techniques depending on how you want the scroll to behave. A common example can be in parallax documents like from this post:

4 Likes