Scrollingtelling-like

Hi all,

Can I trouble you asking what is the best way to achieve the effect from urls below :


or

I was trying scrollama but I find quite hard with my limit js understanding.
How do you advise me to do? Thanks in advance.

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

Wow! that's great Jon, I will try that.
Best,
-Silvio

1 Like

Hi Jonnathan & team,

I am not sure why the scroll text works but the page itself. Would you be able to help ?
Thanks.

scrollstory_test.hype.zip (1.0 MB)

I'm not exactly sure what behavior you want. You seemed to put everything except a few elements inside the "fixed" group, therefore that group will not scroll. If you want some elements to scroll, they must be outside of the fixed group. Feel free to elaborate on what you expect from which elements.

I was trying to replicate this example:


i e, text left synchs with image on right.

on this secont test here:
v2_scrollstory_test.hype.zip (1.0 MB)
when I take the animations group out of "fixed", the scroller work but the text.

I hope that makes more sense now I wat I am trying to accomplish. A typical scrollingtelling story like the NYT.

Much appreciated,

-Silvio

The fixed part won't scroll -- so what you'll want to do is make that smaller and animate yourself the objects into position at the times that you want.