Observations about scrolling physics

[jordwalke]

I thought I'd provide some feedback on the feel of ftscroller. While animating, the experience is quite smooth - better than most examples of scrolling that I see. However, there seems to be a couple of issues.

1. The bounce could stand to be more natural. In most iOS apps, when you hit the bounce wall, there is no noticeable discrete change in velocity, rather the bounce is gracefully absorbed. Also, when pulling to refresh iOS apps don't typically create the type of long delayed rubber banding that I see in ftscroller. I've attempted to change some of the hardcoded cubic bezier parameters for bounce but I can't seem to reproduce a more iOS feel. Have you had any luck in doing so?
2. I've noticed an interesting behavior when accumulating momentum and scrolling. It seems like continued swipes momentarily decrease velocity (while touchmoving). I know this is one of the things that creates a physical feel, but I think that the amount of weight placed on the physical touches while in the middle of scrolling is greater than what I feel in native iOS apps. It's almost like my touchmoves are adding friction to the scrolling physics, yet that friction doesn't increase the velocity of scrolling as much as I expect. Maybe there's something completely different happening but this is the effect that I perceive. Could it be that continued swipes need to be smoothed out more while scrolling? (Or less weight/friction applied to touchmoves while scrolling).

Have you or anyone else found some very nice CubicBezier constants to try?

[jordwalke]

One other thing that I forgot to mention was that I noticed that there is a slight delay when initiating a fling. I've tried toggling requestAnimationFrame modes without seeing much of a difference.

[rowanbeentje]

1) I agree on the bounce speed – the bounce uses a cubic bezier, but the speed is rather messily approximated at the moment, and could definitely be calculated using a much better technique.

2) Momentum doesn't currently accumulate, so I suspect the scroll being stopped by the initial touch causes the loss of velocity you're seeing. Because a CSS animation has to be interrupted, and replaced by position changes in response to touches, there'll almost certainly currently be this judder. Changing this is more difficult - if a fling is underway, and a scroll interruption occurs, we'd have to not interrupt the animation for a short time and instead wait to see other inputs to decide whether to interrupt or accelerate. This may cause actual scroll stopping to feel slower...

I think I've seen the slight delay when initiating a fling on Android - which browser and platform are you seeing it on?

Thanks :)

[jordwalke]

The delay that I noticed was actually in iOS (iPhone 4s) and is more noticeable when there are images in the scroll region.

[rowanbeentje]

Interesting. Not iOS 6 perchance?

[jordwalke]

No, not iOS 6.

[lbj96347]

Besides,I suppose that the user experience of FTscroller can be much better.

I spend one afternoon for the optimization.I try to edit FTscroller's source code.

1,822line bouceDuration = 150;

2,Set a maximum value of bouceDistance

3,Speedup the scrollWheel.

I think that iScroll has the best user experience in Web App Plugins.But iScroll had been one year without updating and many many bugs.So FTscroller can absorb some advantages from it.:-)

[rvanzon]

hi, I noticed that articles on app.ft.com have a very natural bounce, on my iPhone 5 ay least. Much better than the examples. Isn't ftscroller used anymore? It seems native.

[rowanbeentje]

Hi Richard,

Well spotted - native scrolling is currently used on iOS article pages, although only on smallscreen devices. That's mostly for legacy reasons, but is actually due to be switched over soon.

There have been consistent comments that the scrolling doesn't feel right, and I agree - this will be worked on at some point, as soon as I have the time...

[rvanzon]

ok, thanks for responding.

Yes, native scrolling on iOS is great, unbeatable I think. Using FTScroller as fallback could be a fine solution on legacy devices and Android (where native scrolling isn't optimal yet IMO).

I must say that Zynga Scroller is pretty good, only has some glitches when bouncing sometimes. Other than that it's near native. Maybe you could use their physic calculations.

[jordwalke]

@rvanzon: That depends on what you are doing. Try using ZyngaScroller to dynamically load in new content that has many images. You'll see that image decoding is likely going to start making the scrolling choppy. I believe that FTScroller's approach is more resilient to that, but that native overflow-touch-scrolling is near flawlessly resilient to that. However, with native overflow-touch-scrolling there are some things that you just can't do, but you can do with Zynga or FTScroller.

[maurerbot]

+1

[mldahl]

+1

[yckart]

:+1: