How to move objects with scrolling? 🤔

[dsedlarski (Deyan)]

It's me again
I went back to Jonathan's first suggestion with this tutorial:

@jonathan

Tumult Company Blog – 6 Aug 14

Tutorial: Create Parallax effects and single-page scrollable experiences in...

Our good friends at Survey Legend have shared a great tutorial with us on creating a single-page website built for navigating by scrolling. If you’d like a quick demo on how this works, visit…

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!

[jonathan (Jonathan Deutsch)]

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.

@dsedlarski

Also is it right that when the images are distributed in different scenes the web page will load faster?

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.

[dsedlarski (Deyan)]

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:

@jonathan

hypeDocument.goToTimeInTimelineNamed(hypeDocument.durationForTimelineNamed('SceneTimeline'), 'SceneTimeline');

Thank you!

[jonathan (Jonathan Deutsch)]

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!

@dsedlarski

I couldn't understand where to put that code:

I think you have it in the right place in your dummyload() javascript as part of the scene's timeline action.

@dsedlarski

(which seems a bit clumsy to me, but it works)

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.

[dsedlarski (Deyan)]

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."

JumpToScene bug

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!

[MaxZieb (Loves Hype)]

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

[dsedlarski (Deyan)]

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?

[MaxZieb (Loves Hype)]

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.

[jonathan (Jonathan Deutsch)]

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:

1. if scrolling up AND the timeline is greater than 2 seconds, play in reverse
2. 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 .

[dsedlarski (Deyan)]

@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!

[MaxZieb (Loves Hype)]

This has some improvements.

• It doesn't scroll to next scene if (stop) is in the scene name (configurable)
• You can configure the default transition time
• It prevents wheel inputs while being in regular transitions.

scrollingWithWheelDontContinueCondition.hype.zip (36,3 KB)

[dsedlarski (Deyan)]

@MaxZieb, I just don't know how to thank you! This solution is incredible simple and genius! It works!!! I'm very very grateful!

Can I ask you about the swipe issue on mobile? Maybe I should use another function instead of "Continue Timeline" trigger? Can I use the same code and just replace "wheel" with "swipe" or something?

[MaxZieb (Loves Hype)]

This version allows swipe… it also just requires the init on the first scene now:
scrollingWithWheelConditionSwipe.hype.zip (38,8 KB)

This is the same but has the init code in head HTML:
scrollingWithWheelConditionSwipeHead.hype.zip (39,0 KB)

Functionality is the same on both, if you don't understand or care about the differences go with the version without the head HTML. Head HTML has some advantages but also some pitfalls when using it in WordPress setups etc.

[dsedlarski (Deyan)]

Thank you @MaxZieb!
I'm feeling completely satisfied!

Thank you all guys!

[MaxZieb (Loves Hype)]

@dsedlarski

Can your code ignores videos when there exist video element in some scene? Here I put a video and even if the scene name doesn't start with (stop) tag I can't continue with scrolling. The go back scrolling looks weird too (sometimes goes back sometimes doesn't). Do you have any idea?

You have to set the duration of the scene otherwise the video will set the duration for you. It's the little blue line above the timeline.

① This little blue line indicates the length of a scene. It is automatically calculated by the last action key frame or the last animation ending
② Make sure to set the scene length with an user-defined value because else the video length sets the scene duration for you in its automatic mode

[dsedlarski (Deyan)]

Thank you, Max! I'll try as soon as possible!

[dsedlarski (Deyan)]

Max, I think there is a bug in Hype!
When I set the duration to be the minimum (1 sec) and save the document, after relaunch I found the duration back to the original length! Maybe thats why every time I tried to set the duration the scroll didn't worked!

Here you can see: https://we.tl/t-29NwmSSezY

Is this a bug or I don't understand something?

[MaxZieb (Loves Hype)]

Seams to be a bug… the length is always reset to the video length.
One thing I can think of would be … sticking the video in a symbol.

① Make a symbol from the video
② remove any symbol actions

③ Add a start timeline on symbol load

Hope that helps

[dsedlarski (Deyan)]

Yes, now the duration stays of 1 sec but still I need to scroll up three or more times to go back when I'm on video scene. Moving forward works better. In 90% of cases when I scroll down it works from the first try!

Thank you, Max!

[jonathan (Jonathan Deutsch)]

Thanks - this is in fact a bug. The correct behavior for the duration field is that it cannot get smaller than the last animation. This should include the duration of a video, but it does not. Our notes show that adding another animation will reset it, as would closing and reopening the document. We have this filed. Thanks!