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.
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?
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 .
@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.
@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:
@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?
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.
① 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
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!
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!
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!
, so if you are less than two seconds and scroll up it would still play forward.
