I have a custom scroll created for another project which I am trying to adapt for Tumult.
The goal of the custom scroll is to slow down the page scrolling when the user approaches the very top or the very bottom of the page.
Daniel was kind enough to help me adapt it to make it work. It slows down at the top, however, it does not slow down at the bottom.
Does anyone have any thoughts on how to solve this?
I made my post and then there was a flurry of other posts … wondered if my post got buried (or maybe its simply not that interesting – open that possibility too.)
Since @Daniel helped You originally I thought he would have responded to You as he is already familiar with your Hype doc.
Speaking of Hype docs there was not one included in your ZIP file - just the HTML. One can always generate an HTML file from a Hype doc but not vice-versa. And the Hype doc is where the requested effect would be created~scripted.
When I did run the HTML file it seemed to me to be fine as the scrolling everywhere (top, bottom, middle) was inertial. i.e. The scrolling keep going after releasing the scrolling thumb (slider) but quickly slowing down as it did so. Which lead me back to my first point (#1) above as I did not understand the problem just looking at the HTML file.
I’m still in the same place with this request… but your bump might get You help from other quarters that have a better grasp of the situation than I do.
So as best as I can tell this file does what You are requesting.
But I added a white background to the scene so I could tell when it was present in the viewport - otherwise the Scene (dimensions) and the color of the “Background” (set in the “Scene Inspector”) blended together and I could not discern where the bottom of the scene stopped.
I think you have understood exactly what I am looking for but it is working for you and not for me. I am attaching a recording of what I see. I have included a Chrome and Safari recording. Firefox is the same as Safari.
I tried your file in Chrome and when I do a quick scroll up I can see the red rectangle coming in slowly, however the blue rectangle at the bottom comes in very quickly (no inertia) …?
As a sidepoint, for some reason Safari is adding another block of grey below the white rectangle background you added. Not sure why.
In the Chrome screen capture I noticed a bounce at the top - so I got out my iPad & could recreate what I saw on the screen captures You provided.
Is this accurate - are You using a mobile device? If so the code that @Daniel provided does not work with mobile in my tests. AFAIK that inertial slow down at the top, and bottom, is inherent to iOS - at least since iOS 11.
“Inertial” scrolling is also called “momentum” scrolling according to my readings. Here is one article on this subject (by Chris Coyier).
To get my example to work (on iOS) that I uploaded in my previous post You simply need to disable the “On Scene Load” action that fires the function “customScroll”.
Have not tried Chrome on iOS as I do not have it.
If You wish to have both Desktop and Mobile work in this fashion You could probably do that using layouts & “On Layout Load” to fire (or not) Daniel’s code.
hm, those scriptlines have nothing to do with scrolling. only intersection is that it requests ‘scrollY’ to do some calculation. further more it does not explicit take care of reaching the top or button of a website. it’s more of a transformY using some easing -> that slows down at some point. whatever this script is good for or not … it works as expected for me: https://www2.aachener-zeitung.de/zva/karlo/test/scrollFake/
Sorry I am unable to communicate the precise issue. It is the lack of slowing down at the bottom – not anything to do with a bounce at the top. No, I am not using a mobile device. This is on Mac – Chrome / Safari / Firefox. Not sure why it provides inertia at the bottom for you and not me
Interestingly, Han’s uploaded page “does” show inertia at the bottom – the way I was looking for.
@h_classen Can you please attach the Hype doc so I can take a look more closely?