How can I create objects which will move with scrolling the page?
Something like this: http://apple.co/1A9Ccbr
Also how can I create elements which will for example appear when I reach some viewpoint?
Example for this question is here: http://apple.co/1A9Ccbr
Regards,
Matus
Hi @Matus
Section in documentation
http://tumult.com/hype/documentation/3.0/#viewport-actions
On Enter Viewport
On Exit Viewport
You can tie a timeline to an on scroll function. Sadly, Hype doesn’t have an “action” that does scrolling.
There are a few posts here for similar kinds of solutions.
Survey Legend also did some interesting work with paralax scrolling that we wrote about
But for most of the site the viewport actions are what you want, and it won’t be scrolljacking either.
Hi there!
I have a similar question. When I don't wanna use "slides" and I need to make more natural experience can I do this things:
Can HYPE manage that?
Thanks!
i'd guess all of that, but not without custom javascript and css <- so no real advantage to a setup without hype -> except Hype simplyfies the use of spritesheets in combination with a great timelinefeature
Ok, but how can I use the code that I found? Is it possible to embed it? In my examples from "codepen.io" I can see there are HTML, CSS and JavaScrip columns with specific code. I can't understand it but if you tell me how to use it maybe I will manage that!
you'll have best experience when setting up a "normal" webpage like in the codepen-example and integrate Hype-export within ... here is an example setup of @MaxZieb using Hype: https://www.hypedocks.com/framer-scroll-effect/
you may get the idea 
It seems complicated, but I will try!
Thanks!
Hi, guys!
I successfully did the third example with Hype by inserting the code from https://codepen.io/scottkellum/pen/bHEcA
Parallax.zip (11.5 KB)
Now I wonder if there is a way to do it mostly with HYPE not so much with code. I mean can I put the elements in working area, name it with custom IDs, then with CSS only manage the Z axis? Now I use the code and there is no reason to use HYPE. I can put this code into some text program. Even I can't see the images and texts in the code in HYPE working area. It would be great if I could compose the elements in the workspace and then use CSS code just to make the parallax effect. Is it possible and what would be the syntax?
Something like this might be helpful: You can create your animation using regular Hype timelines, and then control its position by listening to the scroll position:
Parallax is just elements moving at a faster rate than other elements to create the illusion of depth -- so your animated elements just need to have movements with differing speed (using linear easing transitions).
Thank you, Daniel!
I tried to do it but it didn't work. The animation starts automatically when the project is loaded and the scroll only looks at the end of the timeline. What I'm doing wrong?
Parallax_v2.zip (2.0 MB)
a maintimeline will always autostart. for a parallax you'd like to set the animation of elements on different timelines. -> then animate each on scrollprogress
btw -> Hint: Hype offers a great online-documentation
It looks like you need to pause that timeline at the start of the Main Timeline (with a Timeline Action). You might want to also trigger that JavaScript only after a certain position has been scrolled, since the animation is outside of the viewport when the page is first loaded. You can use a 'viewport action' for that.
Thank you, Daniel! This software is incredible!
It's me again 
I went back to Jonathan's first suggestion with this tutorial:
I found this solution completely appropriate after implementing it step by step. After few weeks working with your software I think Hype is just a truly wonderful program. I began to understand the principles of work, although I am an artist who does not understand any of the codes! Thank you @jonathan, @Daniel, @h_classen for helping me and for being so patient! This forum really helped me a lot! Now I think that Hype is the tool that will make possible the realisation of my project, which many developers have given up!
Here is my test file:
JumpToScene.zip (2.7 МБ)
I need share to you just one more thing I can't handle... 
I searched for solution in the documentation and the other topics in this forum but with no success. Sorry if there is an answer and I missed it!
The problem is when you reach the point after the slider: 
I set the knob after reaches the end of the slider's line with trigger "Jump to scene". Why did I do it with scenes? Because I need to prevent users continue forward if they are not complete the slider action! I'm so happy that now when you reach the slider you can't go on with scrolling! Even more, I was able to set it to automatically move forward if the slider is complete. Also is it right that when the images are distributed in different scenes the web page will load faster? My article will be very long and it is important to create small pieces using the scenes that make up the whole page without making it difficult to load.
But here is the problem!
When the viewer is transferred to the next scene, he cannot return to the end of the previous one using the scroll!
How can I make scrolling up return to the end of a previous scene if we are at the beginning of the current one?
I apologize for my long post and for being so annoying!
Returning to a previous scene would modify the runOnLoad code to look like:
function wheel2(event) { // other browsers
event.preventDefault();
if (event.detail < 0 && (hypeDocument.currentTimeInTimelineNamed('SceneTimeline') <= 0)) {
hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom);
} else if (event.detail < 0 && (hypeDocument.currentTimeInTimelineNamed('SceneTimeline') > 2)) {
hypeDocument.continueTimelineNamed('SceneTimeline', hypeDocument.kDirectionReverse);
} else {
hypeDocument.continueTimelineNamed('SceneTimeline', hypeDocument.kDirectionForward) }
}
function wheel(event) { // Firefox, Safari
event.preventDefault();
if (event.wheelDeltaY > 0 && (hypeDocument.currentTimeInTimelineNamed('SceneTimeline') <= 0)) {
hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom);
} else if (event.wheelDeltaY > 0 && (hypeDocument.currentTimeInTimelineNamed('SceneTimeline') > 2)) {
hypeDocument.continueTimelineNamed('SceneTimeline', hypeDocument.kDirectionReverse);
} else {
hypeDocument.continueTimelineNamed('SceneTimeline', hypeDocument.kDirectionForward) }
}
window.onmousewheel = document.onmousewheel = wheel;
window.addEventListener("DOMMouseScroll", wheel2, false);
document.addEventListener("DOMMouseScroll", wheel2, false);
As you can see, there's a new initial if clause that checks to see if the timeline is at 0 seconds, and if so it does a push transition to go to the previous scene.
However the fly in the ointment is properly getting back to the end of the previous scene. If I read your document correctly, to get there all you really need to do is this call:
hypeDocument.goToTimeInTimelineNamed(hypeDocument.durationForTimelineNamed('SceneTimeline'), 'SceneTimeline');
This would put you at the end of the SceneTimeline. The issue comes about because the scene will get loaded and show the transition at the start of the scene. If you were to just place this call conditionally on an On Scene Load handler, then the transition would show the start and then it would immediately jump when being done transitioning. There's the On Prepare For Display call which is intended to allow you to modify the scene's DOM before a transition so the transition looks correct, but at the time of this call the scene's timelines aren't running so you can't set them.
Basically with a multi-scene approach you'll have to get a little creative to solve this. My first instinct would be to make a "dummy" scene that just shows the last frame. You'd transition to this, and then instantly switch to the real scene and set the timeline. For an instant transition the code would just look like:
hypeDocument.showSceneNamed("My Main Scene", hypeDocument.kSceneTransitionInstant);
hypeDocument.goToTimeInTimelineNamed(hypeDocument.durationForTimelineNamed('SceneTimeline'), 'SceneTimeline');
(replacing "My Main Scene")
But there's probably other ways to go about doing this as well.
Of note, Hype will by default preload all images before showing any scenes. This can be disabled by unchecking "Preload' in the resources library for each image if you do not want it.
The basic answer is "yes" but with enough conditions that it might not make any practical difference. Downloading is usually the biggest holdup, so if the images are set to preload anyways a per scene vs. single scene approach makes less of an impact. Unfortunately there are a lot of factors (including how/when a browser decided to render) to say definitively if this split makes sense for you without measuring.
Thank you @jonathan for the quick and so detailed answer!
I just decided that the problem was solved and I found something very strange. It was there in the beginning, but then I didn't pay attention to it.
When you are at the beginning of a scene and scroll up, it takes a step forward, as if you scrolled down. Example: If you are on "Scene1" at 00:00 second and scroll as if you want to see something above it, Hype moves you forward along the timeline to the next "Pause Timeline" trigger (at 02:00 second).
Here is the file with the changes you suggested: JumpToScene.zip (2.7 МБ)
Now, after the slider, I can go back to the previous scene by doing the "dummy" scene you suggested (which seems a bit clumsy to me, but it works). The problem arises when after the slider I do not return immediately, but continue once or twice down and then I want to return. I still can't get to the beginning of the scene, from where I can return to the previous scene!
I don't want to do this with scenes, as this will not necessarily speed up the loading of the site. Do you think it would be easier to make the animations in one timeline and in another way to restrict the user to continue if he has not completed the slider? How can I do that if this will be more easier way?
PS:
I couldn't understand where to put that code:
Thank you!
I'm not sure I follow the problem you are experiencing since I'm not too familiar with the actual content. Any chance you could make a little video that shows what you're hitting? If you can narrate your actions (when you scroll etc) and the problem that would be best to know what to look for!
I think you have it in the right place in your dummyload() javascript as part of the scene's timeline action.
Oh, completely agreed . It was the only "easy" solution I could think of given the constraint of On Prepare for Display not being able to run timelines for the non-active scene. This is a bit of a historic artifact from Hype's development. I've definitely taken note of this problem.
Yes, sure! Now I'm attaching video example:
"The weird thing is when you are in the very beginning of the scene and you scroll up. This happens even in the SurveyLegends’ example. It doesn't matter if I do scroll up or scroll down. In both cases, the scene goes forward. I thing the right way will be when we are at the beginning of the scene, when we scroll up, nothing should happen."
If I wait longer before scroll up the problem disappear. It looks like a bug. Do you agree? Where I’m wrong? Could the problem be that I'm scrolling faster and not allowing enough time for the animation to spin?
Thank you a lot!
I was playing around with the concept and came up with this solution. It's not tailored to any specific request on this thread but rather a generalization using the main timeline. On each scene load it needs to run the following code:
if (hypeDocument.inTransition == -1) {
hypeDocument.goToTimeInTimelineNamed(hypeDocument.durationForTimelineNamed('timelineName'), 'timelineName');
hypeDocument.startTimelineNamed('timelineName', hypeDocument.kDirectionReverse);
hypeDocument.pauseTimelineNamed('timelineName');
}
hypeDocument.inTransition = 0;
if (!hypeDocument.wheelInstalled){
hypeDocument.wheelInstalled = true;
window.addEventListener("wheel", function(event){
if (hypeDocument.inTransition) return;
var delta = Math.sign(event.deltaY);
var time = hypeDocument.currentTimeInTimelineNamed('timelineName');
var duration = hypeDocument.durationForTimelineNamed('timelineName');
var sceneNames = hypeDocument.sceneNames();
if (delta < 0) {
if (time <= 0) {
if (sceneNames.indexOf(hypeDocument.currentSceneName()) == 0) return;
hypeDocument.inTransition = -1;
hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom);
hypeDocument.goToTimeInTimelineNamed(hypeDocument.durationForTimelineNamed('timelineName'), 'timelineName');
} else {
hypeDocument.continueTimelineNamed('timelineName', hypeDocument.kDirectionReverse);
}
} else {
if (time >= duration) {
if (sceneNames.indexOf(hypeDocument.currentSceneName()) == sceneNames.length-1) return;
hypeDocument.inTransition = 1;
hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushBottomToTop);
} else {
hypeDocument.continueTimelineNamed('timelineName', hypeDocument.kDirectionForward)
}
}
});
}
File is here:
scrollingWithWheel.hype.zip (20,5 KB)
Update: fixed little error on Chrome