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.
Hi all,
Can I trouble you asking what is the best way to achieve the effect from urls below :
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:
<style>
.fixed {
position: fixed !important;
}
</style>
<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:
Wow! that's great Jon, I will try that.
Best,
-Silvio
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:
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.