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.
2 Likes
Thank you, Daniel! This software is incredible!
1 Like
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.
1 Like
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
3 Likes
Thank you so much @MaxZieb!
I tried your code immediately and I can say the transition between the scenes works better, but in my case the tricky moment is that I want to stop users in the end of the first scene where the slider appears. The user must pull the slider all the way and only then will be able to continue to the next scene.
This is my file with your code: Parallax_v4.zip (2.7 МБ)
I also noticed something very positive in your code! It works better than the previous one in that I can interrupt the animation from trigger "Pause Timeline" to trigger "Pause Timeline" if I change direction with the mouse scroll! This is a big improvement for me!
I would prefer it, but then how do I deal with the other problem? Do you have any idea how can I set such a limit on the slider?
1 Like
The code is as said not for a specific solution but you could just add the line
if (sceneNames.indexOf(hypeDocument.currentSceneName()) == 0) return;
when checking if you want to go forward.
This will not forward if on the first scene now:
scrollingWithWheelDontContinueFirstScene.hype.zip (25,8 KB)
Hope that helps.
1 Like
I'm glad @MaxZieb's solution worked out!
It does appear the root of the issue in the older code was a bug; basically the logic was:
- if scrolling up AND the timeline is greater than 2 seconds, play in reverse
- otherwise play forward
The problem in the second clause is that it doesn't actually check the direction of the scroll , so if you are less than two seconds and scroll up it would still play forward.
In the wheel2 function the final else should instead be:
} else if (event.detail > 0) {
And in wheel it should be:
} else if (event.wheelDeltaY < 0) {
The second problem has more to do with integration into making this a multi-scene effort. I assume the "2 seconds" bit was about showing some initial animation. But in the code I sent you there wouldn't be a way to get back to the top if you go beyond this marker since the play in reverse will only work when the timeline is greater than 2 seconds and the check for seeing if you are at the 0 time.
Let me know if you'd like ideas on fixing this, but it sounds like you aren't going forward with the original code .
2 Likes
@MaxZieb, I didn't understand how the magic works but what when I want several scenes with sliders and not only the first one? The places of my sliders will be random.
scrollingWithWheelDontContinueSeveralScenes.zip (39.6 КБ)
@jonathan, it seems your solution works fine right now! Thank you!
But I'm still wondering if it can work with @MaxZieb's code, because it will save me from making the "dummy" scene!
Also I found a big issue with on mobile. When you reach the end of the scene and you swipe up this automatically send you the to very beginning of the current scene instead of doing nothing. This happens maybe because I set "On swipe Up" to Continue Timeline:
Thank you guys!